Chân trang tùy chỉnh

Sắp xếp lại chân trang

Sắp xếp lại các nút ở chân trang và thêm các hành động phụ như nút “Hôm nay”. Với các thành phần hỗn hợp, bạn có thể kiểm soát chính xác nút nào xuất hiện và theo thứ tự nào.

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


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

Bố cục tối giản

Loại bỏ bất kỳ phần nào bạn không cần. Ở đây, chân trang được bỏ qua hoàn toàn để có một bố cục tối giản chỉ có lịch:

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


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

Ghi đè các Class

Mỗi thành phần hỗn hợp chấp nhận một prop className. Gói Tailwind v3 sử dụng cn() (một tiện ích clsx + twMerge) để hợp nhất các class của bạn với các class mặc định, vì vậy các tiện ích xung đột được giải quyết một cách chính xác:

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


<DatePicker.Root value={value} onChange={setValue}>
  <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>;