日期范围日历

日期范围日历组件允许用户选择一个日期范围，无需任何输入框或弹出层/模态框。

基本用法

2025年3月

日一二三四五六

2025年4月

日一二三四五六

<DateRangeCalendar />

<DateRangeCalendar />

按 Enter 键开始编辑

非受控值 vs. 受控值

组件的值可以是受控的或非受控的。

非受控日历

2022年4月

日一二三四五六

2022年5月

日一二三四五六

受控日历

2022年4月

日一二三四五六

2022年5月

日一二三四五六

<DemoItem label="Uncontrolled calendar">
  <DateRangeCalendar
    defaultValue={[dayjs('2022-04-17'), dayjs('2022-04-21')]}
  />
</DemoItem>
<DemoItem label="Controlled calendar">
  <DateRangeCalendar
    value={value}
    onChange={(newValue) => setValue(newValue)}
  />
</DemoItem>

<DemoItem label="Uncontrolled calendar">
  <DateRangeCalendar
    defaultValue={[dayjs('2022-04-17'), dayjs('2022-04-21')]}
  />
</DemoItem>
<DemoItem label="Controlled calendar">
  <DateRangeCalendar
    value={value}
    onChange={(newValue) => setValue(newValue)}
  />
</DemoItem>

按 Enter 键开始编辑

表单 Props

该组件可以被禁用或只读。

禁用

2022年4月

日一二三四五六

2022年5月

日一二三四五六

只读

2022年4月

日一二三四五六

2022年5月

日一二三四五六

<DemoItem label="disabled">
  <DateRangeCalendar
    defaultValue={[dayjs('2022-04-17'), dayjs('2022-04-21')]}
    disabled
  />
</DemoItem>
<DemoItem label="readOnly">
  <DateRangeCalendar
    defaultValue={[dayjs('2022-04-17'), dayjs('2022-04-21')]}
    readOnly
  />
</DemoItem>

<DemoItem label="disabled">
  <DateRangeCalendar
    defaultValue={[dayjs('2022-04-17'), dayjs('2022-04-21')]}
    disabled
  />
</DemoItem>
<DemoItem label="readOnly">
  <DateRangeCalendar
    defaultValue={[dayjs('2022-04-17'), dayjs('2022-04-21')]}
    readOnly
  />
</DemoItem>

按 Enter 键开始编辑

自定义

选择要渲染的月份

您可以使用 calendars prop 同时渲染最多 3 个月

1 个日历

2025年3月

日一二三四五六

2 个日历

2025年3月

日一二三四五六

2025年4月

日一二三四五六

<DemoItem label="1 calendar">
  <DateRangeCalendar calendars={1} />
</DemoItem>
<DemoItem label="2 calendars">
  <DateRangeCalendar calendars={2} />
</DemoItem>

<DemoItem label="1 calendar">
  <DateRangeCalendar calendars={1} />
</DemoItem>
<DemoItem label="2 calendars">
  <DateRangeCalendar calendars={2} />
</DemoItem>

按 Enter 键开始编辑

您可以使用 currentMonthCalendarPosition prop 选择当前月份的渲染位置。当使用 disableFuture 渲染当前月份和上个月而不是当前月份和下个月时，这可能很有用。

2025年2月

日一二三四五六

2025年3月

日一二三四五六

<DateRangeCalendar currentMonthCalendarPosition={2} disableFuture />

<DateRangeCalendar currentMonthCalendarPosition={2} disableFuture />

按 Enter 键开始编辑

自定义日期渲染

显示的日期可以通过 Day 组件插槽进行自定义。您可以利用 DateRangePickerDay 组件。

2022年4月

日一二三四五六

2022年5月

日一二三四五六

<DateRangeCalendar
  defaultValue={[dayjs('2022-04-17'), dayjs('2022-04-21')]}
  slots={{ day: DateRangePickerDay }}
/>

<DateRangeCalendar
  defaultValue={[dayjs('2022-04-17'), dayjs('2022-04-21')]}
  slots={{ day: DateRangePickerDay }}
/>

按 Enter 键开始编辑

本地化

有关更多详细信息，请参阅日期格式和本地化和本地化组件文档页面。

验证

有关更多详细信息，请参阅验证文档页面。

API

请参阅以下文档，以获得此处提及的组件的所有可用 props 和类的完整参考。

<DateRangeCalendar />