TimePicker

Быстрый старт​

Live Editor
Result
Open in CodeSandbox
Изменение сигнатуры onChange

Колбэк onChange теперь принимает второй аргумент formattedValues: TimePickerChangeEvent — нормализованный объект с текущим значением времени, который всегда имеет одинаковую структуру вне зависимости от способа ввода (ручной ввод или выбор из выпадающего списка).

type TimePickerChangeEvent = {
    value?: string;
    timeValues: {
        hour?: number | null;
        minute?: number | null;
        second?: number | null;
    };
};

Рекомендуется использовать formattedValues вместо первого аргумента event, тип которого в качестве TimePickerChangeEvent является устаревшим (deprecated).

Управление внешним видом​

Внешний вид компонента зависит от свойств appearance, size:

При appearance="clear" можно дополнительно включить разделитель с помощью свойства hasClearDivider. appearance="viewMode" — режим просмотра.

Live Editor
Result
Open in CodeSandbox

Управление форматом времени (с секундами или без)​

С помощью свойства columnsQuantity можно выбрать количество колонок: 2 (часы и минуты) или 3 (часы, минуты, секунды).

Live Editor
Result
Open in CodeSandbox

12-часовой формат (AM/PM)​

Свойство hasTimeFormat включает 12-часовой формат: колонка часов показывает значения 12, 01–11, а справа добавляется колонка выбора AM/PM.

AM/PM в поле ввода — не часть текста, а слот textAfter. Если задать свой textAfter, значения склеиваются: например, PM TA.

С клавиатуры AM/PM не вводится — переключается только колонкой в выпадающем списке.

Значение всегда остаётся 24-часовым

hasTimeFormat влияет только на отображение. Свойства value, min, max, disabledValues и значение в onChange по-прежнему используют 24-часовую нотацию. Это позволяет не менять логику приложения при переключении формата.

Полночь и полдень отображаются как 12:00 AM и 12:00 PM соответственно.

Live Editor
Result
Open in CodeSandbox

Расположение выпадающего списка​

Свойство dropdownAlign позволяет выравнивать выпадающий список относительно поля ввода.

Live Editor
Result
Open in CodeSandbox

Подсказки​

Для вывода подсказки снизу от поля используйте свойство leftHelper, для подсказки в виде Tooltip - hintText, для подсказки сверху справа - titleCaption:

Live Editor
Result
Open in CodeSandbox

Управление клавиатурной навигацией​

Компонент поддерживает полную клавиатурную навигацию:

  • Enter - открыть/закрыть выбор времени
  • Arrow Up/Down - навигация по значениям
  • Arrow Left/Right - переход между колонками
  • Tab - переход к следующему значению

Ограничение допустимого времени​

С помощью свойств min и max можно задать допустимый диапазон времени. Значения вне этого диапазона отображаются как недоступные в выпадающем списке.

Оба свойства принимают строку в формате HH:mm:ss или объект Date.

Live Editor
Result
Open in CodeSandbox

API​