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

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

Размер TimePicker задаётся с помощью свойства size:

Live Editor
Result
Open in CodeSandbox

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

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

Live Editor
Result
Open in CodeSandbox

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

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

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

Props​