日期範圍日曆

日期範圍日曆讓使用者無需任何輸入或彈出視窗/模態框即可選擇日期範圍。

基本用法

2025年3月

日一二三四五六

2025年4月

日一二三四五六

<DateRangeCalendar />

<DateRangeCalendar />

按下 Enter 鍵開始編輯

非受控值與受控值

組件的值可以是「非受控」或「受控」。

非受控日曆

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 鍵開始編輯

表單屬性

組件可以被停用或設為唯讀。

停用

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` 屬性同時呈現最多 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` 屬性選擇目前月份的呈現位置。當使用 `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

請參閱以下文件，以完整參考此處提及的組件可用的所有屬性和類別。

<DateRangeCalendar />