Поведение

Закрытие при выборе

Когда shouldCloseOnSelect включен, выбор даты автоматически подтверждается, и календарь закрывается.

import { useState } from "react";
import { DateTimePicker } from "react-date-range-picker-styled";
import "react-date-range-picker-styled/rdrp-styles.css";

function ShouldCloseOnSelect() {
  const [value, setValue] = useState<Date | null>(null);

  return (
    <DateTimePicker
      value={value}
      onChange={setValue}
      shouldCloseOnSelect
      time={{ minuteStep: 5 }}
    />
  );
}

Несколько месяцев

Отображение нескольких месяцев рядом.

import { useState } from "react";
import { DateTimePicker } from "react-date-range-picker-styled";
import "react-date-range-picker-styled/rdrp-styles.css";

function MultiMonth() {
  const [value, setValue] = useState<Date | null>(null);

  return (
    <DateTimePicker value={value} onChange={setValue} numberOfMonths={2} time={{ minuteStep: 5 }} />
  );
}

Интеграция с формой

Используйте проп name для добавления скрытого поля ввода для нативной отправки формы.

💡 Tip

Стилизация кнопки отправки в этом примере является пользовательской — библиотека предоставляет только сам выборщик дат.

import { type SubmitEvent, useState } from "react";
import { DateTimePicker } from "react-date-range-picker-styled";
import "react-date-range-picker-styled/rdrp-styles.css";

function FormIntegration() {
  const [value, setValue] = useState<Date | null>(null);

  const handleSubmit = (e: SubmitEvent<HTMLFormElement>) => {
    e.preventDefault();
    const formData = new FormData(e.currentTarget);
    const appointment = formData.get("appointment");
    alert(`Submitted datetime: ${typeof appointment === "string" ? appointment : ""}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <DateTimePicker value={value} onChange={setValue} name="appointment" />
      <button type="submit" style={{ marginTop: 8 }}>
        Submit
      </button>
    </form>
  );
}