FieldTime

Поле выбора времени. Базируется на FieldDecorator и @cloud-ru/ds-input-private, в качестве picker’а использует TimePickerDropdown из @cloud-ru/ds-calendar. Значение — объект TimeValue ({ hours, minutes, seconds }). Ввод идёт по сегментной маске чч:мм:сс (inputMode='numeric'), выбор — через дропдаун с барабанами времени.

Когда использовать

• Ввод точного времени в формах: расписание, дедлайны, окна обслуживания.
• Когда нужны и клавиатурный ввод по маске, и выбор мышью из дропдауна.
• Для ввода только часов и минут отключите секунды через showSeconds={false} — маска станет чч:мм.
• Для выбора даты используйте FieldDate, для даты со временем — соответствующее поле, не FieldTime.

Анатомия

Сегментный ввод с клавиатуры

Поле редактируется посегментно: фокус (или клик) выделяет сегмент (чч, мм, сс), цифры заполняют его с автопереходом к следующему, ←/→ двигают по сегментам, Backspace очищает сегмент до плейсхолдера, ArrowDown открывает picker и переводит фокус на барабаны времени. Значения сегментов зажимаются к допустимым (часы ≤ 23, минуты/секунды ≤ 59).

Size (default m)

ValidationState (default default)

Управляет тонировкой acrylic-фона поля и иконкой подсказки. Проп error форсит error.

Установка

pnpm add @cloud-ru/ds-fields

import { FieldTime } from '@cloud-ru/ds-fields'
import { TimeValue } from '@cloud-ru/ds-calendar'

Примеры использования

Базовое поле

import { TimeValue } from '@cloud-ru/ds-calendar';
import { FieldTime } from '@cloud-ru/ds-fields';
import { useState } from 'react';

export function TimeBasic() {
  const [value, setValue] = useState<TimeValue | undefined>({ hours: 9, minutes: 30, seconds: 0 });
  return (
    <FieldTime label='Время' hint='Введите HH:MM:SS или выберите из дропдауна' value={value} onChange={setValue} />
  );
}

Без секунд

import { TimeValue } from '@cloud-ru/ds-calendar';
import { FieldTime } from '@cloud-ru/ds-fields';
import { useState } from 'react';

export function TimeShowSeconds() {
  const [value, setValue] = useState<TimeValue | undefined>({ hours: 14, minutes: 25, seconds: 0 });
  return (
    <FieldTime
      label='Время без секунд'
      hint='showSeconds=false — маска HH:MM, picker без барабана секунд'
      showSeconds={false}
      value={value}
      onChange={setValue}
    />
  );
}

Readonly с копированием

import { FieldTime } from '@cloud-ru/ds-fields';

export function TimeReadonly() {
  return <FieldTime label='Время выполнения' readonly defaultValue={{ hours: 23, minutes: 59, seconds: 59 }} />;
}

Props

Types

FieldTimeProps

FieldLayoutPresets

Related props

FieldLength

QuestionTooltipProps

Size

TimeValue

ValidationState

Storybook

Figma