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

Time Picker

Time pickers allow the user to select a single time.

Time pickers allow the user to select a single time (in the hours:minutes format). The selected time is indicated by the filled circle at the end of the clock hand.

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}>
  <TimePicker
    label="Basic example"
    value={value}
    onChange={(newValue) => {
      setValue(newValue);
    }}
    renderInput={(params) => <TextField {...params} />}
  />
</LocalizationProvider>

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

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

SELECT TIME
:
123456789101112
<LocalizationProvider dateAdapter={AdapterDateFns}>
  <StaticTimePicker
    displayStaticWrapperAs="mobile"
    value={value}
    onChange={(newValue) => {
      setValue(newValue);
    }}
    renderInput={(params) => <TextField {...params} />}
  />
</LocalizationProvider>

Responsiveness

The time picker component is designed and optimized for the device it runs on.

  • The MobileTimePicker component works best for touch devices and small screens.
  • The DesktopTimePicker component works best for mouse devices and large screens.

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

Form props

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

Локализация

Use LocalizationProvider to change the date-engine locale that is used to render the time picker. The time picker will automatically adjust to the locale's time setting, i.e. the 12-hour or 24-hour format. This can be controlled with ampm prop.

Time validation

Landscape

SELECT TIME
:
051015202530354045505500
<LocalizationProvider dateAdapter={AdapterDateFns}>
  <StaticTimePicker
    ampm
    orientation="landscape"
    openTo="minutes"
    value={value}
    onChange={(newValue) => {
      setValue(newValue);
    }}
    renderInput={(params) => <TextField {...params} />}
  />
</LocalizationProvider>

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

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

001234567891011121314151617181920212223
<LocalizationProvider dateAdapter={AdapterDateFns}>
  <ClockPicker date={date} onChange={(newDate) => setDate(newDate)} />
</LocalizationProvider>

Seconds

The seconds input can be used for selection of a precise time point.

API