Chân trang tùy chỉnh

Xây dựng một chân trang hoàn toàn tùy chỉnh với các nút và bố cục của riêng bạn, hoặc loại bỏ hoàn toàn các phần để có một bộ chọn tối giản.

Chân trang được sắp xếp lại

Sắp xếp lại các nút ở chân trang hoặc thêm các nút mới như TodayButton. Thành phần phức hợp DateTimePicker bao gồm một TimeSection với TimePanel để chọn thời gian, và Footer hoạt động như một vùng chứa cho các nút hành động.

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

Bạn cũng có thể bỏ qua hoàn toàn các nút hành động tích hợp và sử dụng các phần tử của riêng bạn bên trong Footer:

<DatePicker.Footer>
  <button onClick={() => setValue(new Date())}>Đặt ngày hôm nay</button>
  <button onClick={() => setValue(null)}>Xóa</button>
</DatePicker.Footer>

Bố cục tối giản

Bỏ qua bất kỳ phần nào bạn không cần. Ví dụ, một lịch nội tuyến không có tiêu đề, không có chân trang hoặc trình kích hoạt:

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

Hoặc một bộ chọn không có chân trang:

<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>

Thêm tên lớp tùy chỉnh

Mỗi phần của thành phần phức hợp chấp nhận một className prop sẽ được hợp nhất với các lớp CSS được định kiểu mặc định:

<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>