日期日历

Date Calendar 组件允许用户在没有任何输入或弹出框/模态框的情况下选择日期。

基本用法

2025年3月

日一二三四五六

<DateCalendar />

<DateCalendar />

按 Enter 键开始编辑

非受控值 vs. 受控值

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

非受控日历

2022年4月

日一二三四五六

受控日历

2022年4月

日一二三四五六

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

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

按 Enter 键开始编辑

表单属性

组件可以被禁用或只读。

禁用

2022年4月

日一二三四五六

只读

2022年4月

日一二三四五六

<DemoItem label="disabled">
  <DateCalendar defaultValue={dayjs('2022-04-17')} disabled />
</DemoItem>
<DemoItem label="readOnly">
  <DateCalendar defaultValue={dayjs('2022-04-17')} readOnly />
</DemoItem>

<DemoItem label="disabled">
  <DateCalendar defaultValue={dayjs('2022-04-17')} disabled />
</DemoItem>
<DemoItem label="readOnly">
  <DateCalendar defaultValue={dayjs('2022-04-17')} readOnly />
</DemoItem>

按 Enter 键开始编辑

视图

组件可以包含三个视图：day、month 和 year。默认情况下，仅启用 day 和 year 视图。

您可以使用 views 属性自定义启用的视图。视图将按照它们在 views 数组中包含的顺序出现。

"年", "月" 和 "日"

2022年4月

日一二三四五六

"日"

2025年3月

日一二三四五六

"月" 和 "年"

2022年4月

<DemoItem label={'"year", "month" and "day"'}>
  <DateCalendar
    defaultValue={dayjs('2022-04-17')}
    views={['year', 'month', 'day']}
  />
</DemoItem>
<DemoItem label={'"day"'}>
  <DateCalendar views={['day']} />
</DemoItem>
<DemoItem label={'"month" and "year"'}>
  <DateCalendar
    defaultValue={dayjs('2022-04-17')}
    views={['month', 'year']}
    openTo="month"
  />
</DemoItem>

<DemoItem label={'"year", "month" and "day"'}>
  <DateCalendar
    defaultValue={dayjs('2022-04-17')}
    views={['year', 'month', 'day']}
  />
</DemoItem>
<DemoItem label={'"day"'}>
  <DateCalendar views={['day']} />
</DemoItem>
<DemoItem label={'"month" and "year"'}>
  <DateCalendar
    defaultValue={dayjs('2022-04-17')}
    views={['month', 'year']}
    openTo="month"
  />
</DemoItem>

按 Enter 键开始编辑

选择初始年份/月份

如果 value 或 defaultValue 包含有效日期，则此日期将用于选择在 day 视图中渲染哪个月份以及在 month 视图中渲染哪个年份。如果 value 和 defaultValue 都不包含有效日期，组件将尝试查找满足验证规则的月份和年份。

您可以使用 referenceDate 覆盖此日期，在下面的示例中，即使没有视觉上选择日期，日历也会渲染 2022 年 4 月

2022年4月

日一二三四五六

<DateCalendar
  referenceDate={dayjs('2022-04-17')}
  views={['year', 'month', 'day']}
/>

<DateCalendar
  referenceDate={dayjs('2022-04-17')}
  views={['year', 'month', 'day']}
/>

按 Enter 键开始编辑

月份和年份日历

如果您只需要 year 视图或 month 视图，则可以使用 YearCalendar / MonthCalendar 组件

年份日历

月份日历

年份顺序

默认情况下，年份按升序显示，按时间顺序从最小年份到最大年份。将 yearsOrder 属性设置为 desc 以按降序显示年份。

降序年份

日视图自定义

显示其他日期

要显示所显示周的所有日期，包括当前月份之外的日期，请使用 showDaysOutsideCurrentMonth。

默认情况下，仅显示当前月份的周，但您可以使用 fixedWeekNumber 属性提供要显示的总周数。对于公历，此值通常设置为 6，因为月份显示可以在 4 到 6 周之间变化。

2025年3月

日一二三四五六

<DateCalendar showDaysOutsideCurrentMonth fixedWeekNumber={6} />

<DateCalendar showDaysOutsideCurrentMonth fixedWeekNumber={6} />

按 Enter 键开始编辑

显示周数

要显示周数，请使用 displayWeekNumber。您可以使用本地化键 localeText.calendarWeekNumberHeaderText 自定义日历周标题。您还可以使用本地化键 localeText.calendarWeekNumberText 的回调自定义渲染为日历周数的内容。

2025年3月

#日一二三四五六

10.

11.

12.

13.

14.

<DateCalendar displayWeekNumber />

<DateCalendar displayWeekNumber />

按 Enter 键开始编辑

周选择器

您可以使用 day 组件插槽选择整周

2022年4月

#日一二三四五六

<DateCalendar
  value={value}
  onChange={(newValue) => setValue(newValue)}
  showDaysOutsideCurrentMonth
  displayWeekNumber
  slots={{ day: Day }}
  slotProps={{
    day: (ownerState) =>
      ({
        selectedDay: value,
        hoveredDay,
        onPointerEnter: () => setHoveredDay(ownerState.day),
        onPointerLeave: () => setHoveredDay(null),
      }) as any,
  }}
/>

<DateCalendar
  value={value}
  onChange={(newValue) => setValue(newValue)}
  showDaysOutsideCurrentMonth
  displayWeekNumber
  slots={{ day: Day }}
  slotProps={{
    day: (ownerState) =>
      ({
        selectedDay: value,
        hoveredDay,
        onPointerEnter: () => setHoveredDay(ownerState.day),
        onPointerLeave: () => setHoveredDay(null),
      }) as any,
  }}
/>

按 Enter 键开始编辑

动态数据

有时可能需要在日历中直接显示其他信息。以下演示展示了如何基于服务器端数据在某天添加徽章

2022年4月

日一二三四五六

🌚🌚

🌚

<DateCalendar
  defaultValue={initialValue}
  loading={isLoading}
  onMonthChange={handleMonthChange}
  renderLoading={() => <DayCalendarSkeleton />}
  slots={{
    day: ServerDay,
  }}
  slotProps={{
    day: {
      highlightedDays,
    } as any,
  }}
/>

<DateCalendar
  defaultValue={initialValue}
  loading={isLoading}
  onMonthChange={handleMonthChange}
  renderLoading={() => <DayCalendarSkeleton />}
  slots={{
    day: ServerDay,
  }}
  slotProps={{
    day: {
      highlightedDays,
    } as any,
  }}
/>

按 Enter 键开始编辑