Benutzerdefinierte Fußzeile

Erstellen Sie eine vollständig benutzerdefinierte Fußzeile mit Ihren eigenen Schaltflächen und Ihrem eigenen Layout oder entfernen Sie Teile vollständig für einen minimalistischen Picker.

Neu angeordnete Fußzeile

Ordnen Sie die Schaltflächen in der Fußzeile neu an oder fügen Sie neue hinzu, wie z.B. TodayButton. Die DateTimePicker-Verbundkomponente enthält einen TimeSection mit einem TimePanel zur Zeitauswahl, und die Footer dient als Container für Aktionsschaltflächen.

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

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

  return (
    <DateTimePicker.Root value={value} onChange={setValue}>
      <DateTimePicker.Trigger />
      <DateTimePicker.Content>
        <DateTimePicker.Header>
          <DateTimePicker.PrevButton />
          <DateTimePicker.Title />
          <DateTimePicker.NextButton />
        </DateTimePicker.Header>
        <DateTimePicker.Grid />
        <DateTimePicker.TimeSection>
          <DateTimePicker.TimePanel target="single" />
        </DateTimePicker.TimeSection>
        <DateTimePicker.Footer>
          <DateTimePicker.TodayButton />
          <div style={{ flex: 1 }} />
          <DateTimePicker.CancelButton />
          <DateTimePicker.ConfirmButton />
        </DateTimePicker.Footer>
      </DateTimePicker.Content>
    </DateTimePicker.Root>
  );
}

Sie können auch die integrierten Aktionsschaltflächen vollständig weglassen und Ihre eigenen Elemente innerhalb von Footer verwenden:

<DatePicker.Footer>
  <button onClick={() => setValue(new Date())}>Heute setzen</button>
  <button onClick={() => setValue(null)}>Löschen</button>
</DatePicker.Footer>

Minimalistisches Layout

Lassen Sie alle Teile weg, die Sie nicht benötigen. Zum Beispiel ein kopfzeilenloser Inline-Kalender ohne Fußzeile oder Auslöser:

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

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

  return (
    <DatePicker.Root value={value} onChange={setValue}>
      <DatePicker.Trigger />
      <DatePicker.Content>
        <DatePicker.Header>
          <DatePicker.PrevButton />
          <DatePicker.Title />
          <DatePicker.NextButton />
        </DatePicker.Header>
        <DatePicker.Grid />
      </DatePicker.Content>
    </DatePicker.Root>
  );
}

Oder ein Picker ohne die Fußzeile:

<DatePicker.Root value={value} onChange={setValue}>
  <DatePicker.Trigger />
  <DatePicker.Content>
    <DatePicker.Header>
      <DatePicker.PrevButton />
      <DatePicker.Title />
      <DatePicker.NextButton />
    </DatePicker.Header>
    <DatePicker.Grid />
  </DatePicker.Content>
</DatePicker.Root>

Hinzufügen von benutzerdefinierten Klassennamen

Jeder Verbundteil akzeptiert eine className-Prop, die mit den standardmäßigen gestylten CSS-Klassen zusammengeführt wird:

<DatePicker.Root value={value} onChange={setValue} className="my-picker">
  <DatePicker.Trigger className="my-trigger" />
  <DatePicker.Content className="my-content">
    <DatePicker.Header className="my-header">
      <DatePicker.PrevButton className="my-nav" />
      <DatePicker.Title className="my-title" />
      <DatePicker.NextButton className="my-nav" />
    </DatePicker.Header>
    <DatePicker.Grid className="my-grid" />
  </DatePicker.Content>
</DatePicker.Root>