跳转到内容

Date Picker 日期选择器

日期选择器可以让用户选择日期。

日期选择器可以让用户选择日期。 该组件的显示方式如下:

  • 手机端的对话框
  • 桌面端输入框的下拉列表中

基本用法

The date picker is rendered as a modal dialog on mobile, and a textbox with a popup on desktop.

<LocalizationProvider dateAdapter={AdapterDateFns}>
  <DatePicker
    label="Basic example"
    value={value}
    onChange={(newValue) => {
      setValue(newValue);
    }}
    renderInput={(params) => <TextField {...params} />}
  />
</LocalizationProvider>

静态模式

It's possible to render any date picker without the modal/popover and text field. 这样的话就可以帮助进一步定制弹出提示/模态框的容器。 这样的话就可以帮助进一步定制弹出提示/模态框的容器。

<LocalizationProvider dateAdapter={AdapterDateFns}>
  <StaticDatePicker
    displayStaticWrapperAs="desktop"
    openTo="year"
    value={value}
    onChange={(newValue) => {
      setValue(newValue);
    }}
    renderInput={(params) => <TextField {...params} />}
  />
</LocalizationProvider>

响应式

日期选择器组件是为它所运行的设备而设计和优化的。

  • The MobileDatePicker component works best for touch devices and small screens.
  • The DesktopDatePicker component works best for mouse devices and large screens.

By default, the DatePicker component renders the desktop version if the media query @media (pointer: fine) matches. 你也可以使用 desktopModeMediaQuery 属性来自定义它。 This can be customized with the desktopModeMediaQuery prop.

Form props 表单的属性

The date picker component can be disabled or read-only.

Localization 本地化

你可以使用 LocalizationProvider 来改变用于渲染日期选择的 date-engine(日期引擎)本地化设置。 下面是一个更改 date-fns 适配器本地化设置的示例:

⚠️ Missing demo `LocalizedDatePicker.js` ⚠️

Jalali calendar system

Install date-fns-jalali and use @date-io/date-fns-jalali adapter to support Jalali calendar.

<LocalizationProvider dateAdapter={AdapterJalali}>
  <DatePicker
    mask="____/__/__"
    value={value}
    onChange={(newValue) => setValue(newValue)}
    renderInput={(params) => <TextField {...params} />}
  />
</LocalizationProvider>

试玩例子

你可以将 yearmonthdate 进行组合显示。 视图的显示顺序是由被包含在 views 数组的顺序来决定的。

横竖方向

For ease of use, the date picker will automatically change the layout between portrait and landscape by subscription to the window.orientation change. 你可以使用 orientation 属性来强行指定布局。 你可以使用 orientation 属性来强行指定布局。

Select date

Fri, Jun 24

<LocalizationProvider dateAdapter={AdapterDateFns}>
  <StaticDatePicker<Date>
    orientation="landscape"
    openTo="day"
    value={value}
    shouldDisableDate={isWeekend}
    onChange={(newValue) => {
      setValue(newValue);
    }}
    renderInput={(params) => <TextField {...params} />}
  />
</LocalizationProvider>

子组件

Some lower-level sub-components (CalendarPicker, MonthPicker, and YearPicker) are also exported. 这些都是在没有包装器或外部逻辑(屏蔽输入、日期值解析和验证等)的情况下渲染的。 这些都是在没有包装器或外部逻辑(屏蔽输入、日期值解析和验证等)的情况下渲染的。

自定义输入组件

You can customize the rendering of the input with the renderInput prop. 请确保 refinputProps 都以正确的方式传入到所定制的输入组件。 请确保 refinputProps 都以正确的方式传入到所定制的输入组件。

<LocalizationProvider dateAdapter={AdapterDateFns}>
  <DatePicker
    label="Custom input"
    value={value}
    onChange={(newValue) => {
      setValue(newValue);
    }}
    renderInput={({ inputRef, inputProps, InputProps }) => (
      <Box sx={{ display: 'flex', alignItems: 'center' }}>
        <input ref={inputRef} {...inputProps} />
        {InputProps?.endAdornment}
      </Box>
    )}
  />
</LocalizationProvider>

自定义日期渲染

你可以通过 renderDay 函数属性来自定义所显示的日期。 You can take advantage of the PickersDay component.

<LocalizationProvider dateAdapter={AdapterDateFns}>
  <StaticDatePicker
    displayStaticWrapperAs="desktop"
    label="Week picker"
    value={value}
    onChange={(newValue) => {
      setValue(newValue);
    }}
    renderDay={renderWeekPickerDay}
    renderInput={(params) => <TextField {...params} />}
    inputFormat="'Week of' MMM d"
  />
</LocalizationProvider>

动态数据

有些时候可能有在日历中显示额外信息的需求。 下面是一个使用 onMonthChangeloadingrenderDay 属性来预取并显示服务器端数据的例子。

Helper text

You can show a helper text with the date format accepted.

<LocalizationProvider dateAdapter={AdapterDateFns}>
  <DatePicker
    label="Helper text example"
    value={value}
    onChange={(newValue) => {
      setValue(newValue);
    }}
    renderInput={(params) => (
      <TextField {...params} helperText={params?.inputProps?.placeholder} />
    )}
  />
</LocalizationProvider>