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

Date Time Picker (Выбор даты/времени)

Комбинированный выбор даты и времени (date & time picker).

Этот компонент сочетает в себе выбор даты и времени. Он позволяет пользователю выбрать одновременно дату и время с одним и тем же контролем.

Обратите внимание, что этот компонент является комбинированным компонентом DatePicker и TimePicker, поэтому любой из этих компонентов может быть передан пользователю DateTimePicker.

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 (Основное использование)

Позволяет выбрать дату и время. Существует 4 доступных шага (год, дата, час и минут), поэтому вкладки должны визуально различать шаги даты/времени.

<LocalizationProvider dateAdapter={AdapterDateFns}>
  <DateTimePicker
    renderInput={(props) => <TextField {...props} />}
    label="DateTimePicker"
    value={value}
    onChange={(newValue) => {
      setValue(newValue);
    }}
  />
</LocalizationProvider>

Responsiveness

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

  • The MobileDateTimePicker component works best for touch devices and small screens.
  • The DesktopDateTimePicker component works best for mouse devices and large screens.

By default, the DateTimePicker component renders the desktop version if the media query @media (pointer: fine) matches. Его можно настроить с помощью DesktopModeMediaQuery.

Form props

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

Date and time validation (Валидация даты и времени)

Можно ограничить выбор даты и времени двумя способами:

  • с помощью minDateTime/maxDateTime можно ограничить выбор времени до или после определенного момента во времени
  • используя minTime/maxTime, вы можете отключить выбор времени до или после определенного времени каждый день соответственно.

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

It's possible to render any date & time picker inline. This will enable building custom popover/modal containers.

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

Кастомизация

Вот несколько примеров хорошо настроенного выбора даты и времени:

Hardcoded helper text

Clear Initial State

API