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

Date Range Picker ⚡️ (Выбор диапазона дат)

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

⚠️ Pro component

The date range picker is intended for Material-UI X Pro, a commercial set of advanced components built on top of the community edition (MIT license).

Это платное расширение будет включать более продвинутые компоненты (rich data grid, date range picker, tree view drag & drop, и т.д.). Ранний доступ начинается по доступной цене.

Выбор диапазона дат (date range pickers) позволяет пользователю выбрать диапазон дат.

Requirements

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

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

// or @material-ui/lab/dateAdapter/{dayjs,luxon,moment} or any valid date-io adapter
import DateFnsAdapter from '@material-ui/lab/AdapterDateFns';
import LocalizationProvider from '@material-ui/lab/LocalizationProvider';

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

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

Обратите внимание, что вы можете передать почти любой prop (свойство) от DatePicker.

to

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

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

June 2021
July 2021
<LocalizationProvider dateAdapter={AdapterDateFns}>
  <StaticDateRangePicker
    displayStaticWrapperAs="desktop"
    value={value}
    onChange={(newValue) => {
      setValue(newValue);
    }}
    renderInput={(startProps, endProps) => (
      <React.Fragment>
        <TextField {...startProps} />
        <Box sx={{ mx: 2 }}> to </Box>
        <TextField {...endProps} />
      </React.Fragment>
    )}
  />
</LocalizationProvider>

Responsiveness

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

  • The MobileDateRangePicker component works best for touch devices and small screens.
  • The DesktopDateRangePicker component works best for mouse devices and large screens.

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

to
to

Form props

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

to
to

Different number of months (Разное количество месяцев)

Обратите внимание, что свойства calender работает только в режиме desktop.

1 calendar

to

2 calendars

to

3 calendars

to

Disabling dates (Отключение дат)

Отключение дат ведет себя так же, как и простой DatePicker.

to

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

Вы можете кастомизировать (настроить) рендеринг input с помощью свойства renderInput. DateRangePicker принимает 2 параметра – для начала и конца ввода соответственно. Если вам нужно отобразить кастомные входные данные, убедитесь, что ref и inputProps правильно установлены на компоненте input.

to 
<LocalizationProvider dateAdapter={AdapterDateFns}>
  <DateRangePicker
    label="Advanced keyboard"
    value={value}
    onChange={(newValue) => setValue(newValue)}
    renderInput={(startProps, endProps) => (
      <React.Fragment>
        <input ref={startProps.inputRef} {...startProps.inputProps} />
        <Box sx={{ mx: 1 }}> to </Box>
        <input ref={endProps.inputRef} {...endProps.inputProps} />
      </React.Fragment>
    )}
  />
</LocalizationProvider>

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

Отображаемые дни настраиваются с помощью функции-свойства renderDay. You can take advantage of the internal DateRangePickerDay component.

June 2021
July 2021
<LocalizationProvider dateAdapter={AdapterDateFns}>
  <StaticDateRangePicker
    displayStaticWrapperAs="desktop"
    label="date range"
    value={value}
    onChange={(newValue) => setValue(newValue)}
    renderDay={renderWeekPickerDay}
    renderInput={(startProps, endProps) => (
      <React.Fragment>
        <TextField {...startProps} />
        <Box sx={{ mx: 2 }}> to </Box>
        <TextField {...endProps} />
      </React.Fragment>
    )}
  />
</LocalizationProvider>

API