Verhalten

Bei Auswahl schließen

Wenn shouldCloseOnSelect aktiviert ist, bestätigt und schließt der Picker automatisch, wenn ein Datum angeklickt wird.

import { useState } from "react";
import { DatePicker } 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 <DatePicker value={value} onChange={setValue} shouldCloseOnSelect />;
}

Mehrere Monate

Zeigen Sie mehrere Monate nebeneinander an.

import { useState } from "react";
import { DatePicker } 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 <DatePicker value={value} onChange={setValue} numberOfMonths={2} />;
}

Formularintegration

Verwenden Sie die name-Prop, um ein verstecktes Eingabefeld für die native Formularübermittlung einzufügen.

💡 Tip

Das Styling des Senden-Buttons in diesem Beispiel ist benutzerdefiniert – die Bibliothek stellt nur den Datumswähler zur Verfügung.

import { type SubmitEvent, useState } from "react";
import { DatePicker } 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 birthday = formData.get("birthday");
    alert(`Submitted date: ${typeof birthday === "string" ? birthday : ""}`);
  };

  return (
    <form onSubmit={handleSubmit} style={{ display: "flex", alignItems: "center", gap: 8 }}>
      <DatePicker value={value} onChange={setValue} name="birthday" />
      <button
        type="submit"
        style={{
          padding: "6px 14px",
          border: "1px solid #d1d5db",
          borderRadius: 6,
          background: "#3b82f6",
          color: "#fff",
          cursor: "pointer",
          fontSize: 13,
        }}
      >
        Submit
      </button>
    </form>
  );
}