Перейти к контенту
Редактировать эту страницу

Date Picker

Date pickers позволяют пользователю выбирать дату.

Date pickers позволяют пользователю выбирать дату. Date pickers отображаются с:

  • Dialogs on mobile
  • Text field dropdowns on desktop

Requirements

Этот компонент опирается на выбранную Вами библиотеку управления датами. Поддерживает date-fns, luxon, dayjs, moment и любую другую библиотеку с помощью публичного dateAdapter интерфейса.

Пожалуйста, установите любую из этих библиотек и настройте правильно механизм даты, обернув root (или самый высокий уровень, на котором вы хотели бы иметь доступ к pickers) с LocalizationProvider:

// or @material-ui/lab/Adapter{DayJS,Luxon,Moment} or any valid date-io adapter
import AdapterDateFns from '@material-ui/lab/AdapterDateFns';
import LocalizationProvider from '@material-ui/lab/LocalizationProvider';

function App() {
  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>...</LocalizationProvider>
  );
}

Basic Usage (Основное использование)

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>

Static mode (Статический режим)

It's possible to render any date picker without the modal/popover and text field. Это может быть полезно при создании пользовательских popover/modal контейнеров.

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

Responsiveness

Компонент выбора даты разработан и оптимизирован под устройство, на котором он работает.

  • 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.

Form props

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

Локализация

Используйте LocalizationProvider для изменения локали движка дат, используемой для рендеринга date picker. Вот пример изменения локали для адаптера date-fns:

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>

Views playground

Можно комбинировать вид выбора year, month, и date . Этот вид будет отображаться в том порядке, в котором они указаны в массиве views.

Landscape orientation (Альбомная ориентация)

For ease of use, the date picker will automatically change the layout between portrait and landscape by subscription to the window.orientation change. Вы можете принудительно установить определенный вид с помощью свойства orientation.

SELECT DATE

Tue, Jun 29

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

Sub-components (Подкомпоненты)

Some lower-level sub-components (CalendarPicker, MonthPicker, and YearPicker) are also exported. Они рендерятся без обёртки или внешней логики (masked input, date values parsing, validation, и т.д.).

Custom input component (Кастомный компонент input)

You can customize the rendering of the input with the renderInput prop. Убедитесь в корректности указания ref и inputProps в кастомном компоненте input.

<LocalizationProvider dateAdapter={AdapterDateFns}>
  <DesktopDatePicker
    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>

Customized day rendering (Кастомизированный рендеринг дня)

Отображаемые дни настраиваются с помощью функции-свойства 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>

Dynamic data (Динамические данные)

Иногда в календаре может потребоваться отображение дополнительной информации. Вот пример предварительной выборки и отображения серверных данных с помощью свойств onMonthChange, loadingи renderDay.

API