日期选择器

日期选择器组件允许用户选择日期。

基本用法

基本日期选择器

<DatePicker label="Basic date picker" />

<DatePicker label="Basic date picker" />

按 Enter 开始编辑

组件构成

该组件使用 DateField 进行键盘编辑，并使用 DateCalendar 进行视图编辑构建。

查看他们的文档页面以获取更多信息

您可以在专门的 API 页面上查看组合组件的可用属性。某些 DateField 属性在 Picker 组件上不可用，您可以使用 slotProps.field 将它们传递给字段。

非受控 vs. 受控值

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

非受控选择器

受控选择器

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

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

按 Enter 开始编辑

可用组件

该组件有四种变体可用

DesktopDatePicker 组件最适合鼠标设备和大屏幕。它在弹出窗口内渲染视图，并允许直接在字段内编辑值。
MobileDatePicker 组件最适合触摸设备和小屏幕。它在模态框内渲染视图，并且不允许直接在字段内编辑值。
DatePicker 组件根据运行它的设备渲染 DesktopDatePicker 或 MobileDatePicker。
StaticDatePicker 组件在没有弹出窗口/模态框和字段的情况下渲染。

桌面变体

移动变体

响应式变体

静态变体

2022年4月

日一二三四五六

<DemoItem label="Desktop variant">
  <DesktopDatePicker defaultValue={dayjs('2022-04-17')} />
</DemoItem>
<DemoItem label="Mobile variant">
  <MobileDatePicker defaultValue={dayjs('2022-04-17')} />
</DemoItem>
<DemoItem label="Responsive variant">
  <DatePicker defaultValue={dayjs('2022-04-17')} />
</DemoItem>
<DemoItem label="Static variant">
  <StaticDatePicker defaultValue={dayjs('2022-04-17')} />
</DemoItem>

<DemoItem label="Desktop variant">
  <DesktopDatePicker defaultValue={dayjs('2022-04-17')} />
</DemoItem>
<DemoItem label="Mobile variant">
  <MobileDatePicker defaultValue={dayjs('2022-04-17')} />
</DemoItem>
<DemoItem label="Responsive variant">
  <DatePicker defaultValue={dayjs('2022-04-17')} />
</DemoItem>
<DemoItem label="Static variant">
  <StaticDatePicker defaultValue={dayjs('2022-04-17')} />
</DemoItem>

按 Enter 开始编辑

默认情况下，如果媒体查询 @media (pointer: fine) 匹配，则 DatePicker 组件会渲染桌面版本。这可以使用 desktopModeMediaQuery 属性进行自定义。

表单属性

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

禁用

只读

名称

<DatePicker label="disabled" disabled />
<DatePicker label="readOnly" readOnly />
<DatePicker label="name" name="startDate" />

<DatePicker label="disabled" disabled />
<DatePicker label="readOnly" readOnly />
<DatePicker label="name" name="startDate" />

按 Enter 开始编辑

视图

该组件支持三个视图：day、month 和 year。

默认情况下，day 和 year 视图已启用。使用 views 属性更改此行为

“year”、“month”和“day”

“day”

“month”和“year”

<DatePicker
  label={'"year", "month" and "day"'}
  views={['year', 'month', 'day']}
/>
<DatePicker label={'"day"'} views={['day']} />
<DatePicker label={'"month" and "year"'} views={['month', 'year']} />

<DatePicker
  label={'"year", "month" and "day"'}
  views={['year', 'month', 'day']}
/>
<DatePicker label={'"day"'} views={['day']} />
<DatePicker label={'"month" and "year"'} views={['month', 'year']} />

按 Enter 开始编辑

默认情况下，组件在挂载时渲染 day 视图。使用 openTo 属性更改此行为

“year”

“month”

<DatePicker label={'"year"'} openTo="year" />
<DatePicker
  label={'"month"'}
  openTo="month"
  views={['year', 'month', 'day']}
/>

<DatePicker label={'"year"'} openTo="year" />
<DatePicker
  label={'"month"'}
  openTo="month"
  views={['year', 'month', 'day']}
/>

按 Enter 开始编辑

年份顺序

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

降序排列的年份

<DatePicker
  label="Years in descending order"
  maxDate={currentYear}
  openTo="year"
  views={['year', 'month']}
  yearsOrder="desc"
  sx={{ minWidth: 250 }}
/>

<DatePicker
  label="Years in descending order"
  maxDate={currentYear}
  openTo="year"
  views={['year', 'month']}
  yearsOrder="desc"
  sx={{ minWidth: 250 }}
/>

按 Enter 开始编辑

横向方向

默认情况下，日期选择器组件根据 window.orientation 值自动设置方向。您可以使用 orientation 属性强制指定方向

2025年3月

日一二三四五六

<StaticDatePicker orientation="landscape" />

<StaticDatePicker orientation="landscape" />

按 Enter 开始编辑

辅助文本

您可以显示带有接受的日期格式的辅助文本

辅助文本示例

MM/DD/YYYY

<DatePicker
  label="Helper text example"
  slotProps={{
    textField: {
      helperText: 'MM/DD/YYYY',
    },
  }}
/>

<DatePicker
  label="Helper text example"
  slotProps={{
    textField: {
      helperText: 'MM/DD/YYYY',
    },
  }}
/>

按 Enter 开始编辑

清除值

您可以启用可清除行为

DesktopDatePicker

本地化

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

验证

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

自定义

您可以查看如何自定义日期选择器及其子组件的多个示例。

2025年3月

#日一二三四五六

API

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

日期选择器

周日，4月17日

––

––