Benutzerdefinierte Fußzeile

Neu angeordnete Fußzeile

Ordnen Sie die Schaltflächen in der Fußzeile neu an oder fügen Sie neue wie den TodayButton hinzu. Da jede Schaltfläche ein unabhängiger Teil des Baukastens ist, steuern Sie die Reihenfolge und das Layout.

import { useState } from "react";
import { DateTimePicker } from "react-date-range-picker-tailwind4";

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>
  );
}

Minimales Layout

Lassen Sie alle Teile weg, die Sie nicht benötigen. Lassen Sie zum Beispiel die Fußzeile für einen minimalen Popup-Kalender ganz weg:

import { useState } from "react";
import { DatePicker } from "react-date-range-picker-tailwind4";

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>
  );
}

Klassen überschreiben

Jeder Teil des Baukastens akzeptiert eine className-Prop. Das Tailwind v4-Paket verwendet cn() (ein clsx + twMerge-Dienstprogramm), um Ihre Klassen mit den Standardeinstellungen zusammenzuführen, sodass widersprüchliche Dienstprogramme korrekt aufgelöst werden:

import { DatePicker } from "react-date-range-picker-tailwind4";

<DatePicker.Root value={value} onChange={setValue}>
  {/* Breite und Innenabstand des Triggers überschreiben */}
  <DatePicker.Trigger className="min-w-[300px] px-4 py-3" />
  <DatePicker.Content className="rounded-2xl shadow-xl">
    <DatePicker.Header>
      <DatePicker.PrevButton />
      <DatePicker.Title className="text-lg" />
      <DatePicker.NextButton />
    </DatePicker.Header>
    <DatePicker.Grid />
  </DatePicker.Content>
</DatePicker.Root>;