FieldDate

Поле выбора даты. Базируется на FieldDecorator и CalendarDropdown из @cloud-ru/ds-calendar. Триггер совмещает текстовый ввод с маской и кнопку календаря; календарь открывается в popover. Поддерживает три режима выбора, кнопки очистки и копирования.

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

• Ввод одной даты в формах и фильтрах (mode='date').
• Ввод даты вместе со временем (mode='date-time'); секунды управляются пропом showSeconds.
• Выбор периода из двух дат (mode='date-range') — два связанных поля с разделителем.
• Только время без даты — используйте FieldTime, не FieldDate.

Анатомия

Триггер собирается из:

• iconBefore — иконка перед текстом ввода (по умолчанию контекст календаря несёт кнопка справа).
• input(ы) с маской — одно поле в режимах date/date-time, два связанных в date-range.
• кнопка очистки (showClearButton) — крестик, активна при непустом значении и не disabled/readonly.
• кнопка копирования (showCopyButton) — копирует значение в буфер, видна только в readonly при непустом значении.
• кнопка календаря — открывает popover с CalendarDropdown.

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

В режимах date и date-time поле редактируется посегментно: фокус (или клик) выделяет сегмент (ДД, ММ, ГГГГ, …), цифры заполняют его с автопереходом к следующему, ←/→ двигают по сегментам, Backspace очищает сегмент до плейсхолдера, ArrowDown открывает календарь. Невалидные значения зажимаются к допустимым. Режим date-range использует обычный ввод по маске.

Mode (default date)

• date — одна дата, маска ДД.ММ.ГГГГ.
• date-time — дата и время, маска ДД.ММ.ГГГГ, чч:мм:сс (секунды зависят от showSeconds).
• date-range — период из двух дат, два поля через разделитель.

Size (default m)

ValidationState (default default)

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

ShowSeconds (default true)

Действует только в режиме date-time. При true маска и календарь включают секунды (чч:мм:сс), при false — только часы и минуты (чч:мм).

Установка

pnpm add @cloud-ru/ds-fields

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

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

Базовое поле

import { FieldDate } from '@cloud-ru/ds-fields';
import { useState } from 'react';

export function DateBasic() {
  const [value, setValue] = useState<Date | undefined>(undefined);
  return <FieldDate label='Дата' hint='Маска DD.MM.YYYY или выбор в календаре' value={value} onChange={setValue} />;
}

Выбор периода

import { FieldDate } from '@cloud-ru/ds-fields';
import { useState } from 'react';

export function DateRange() {
  const [value, setValue] = useState<[Date | undefined, Date | undefined]>([undefined, undefined]);
  return (
    <FieldDate
      label='Период'
      mode='date-range'
      hint='Два поля — начало и конец периода'
      value={value}
      onChange={setValue}
    />
  );
}

Дата и время с секундами

import { FieldDate } from '@cloud-ru/ds-fields';
import { useState } from 'react';

export function DateTimeWithSeconds() {
  const [value, setValue] = useState<Date | undefined>(undefined);
  return (
    <FieldDate
      label='Дата и время'
      mode='date-time'
      showSeconds
      hint='Маска DD.MM.YYYY, HH:MM:SS — секунды управляются showSeconds'
      value={value}
      onChange={setValue}
    />
  );
}

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

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

export function DateReadonly() {
  return <FieldDate label='Дата создания' readonly defaultValue={new Date(2026, 4, 17)} />;
}

Быстрые диапазоны и выходные

import { DATE_MODE, FieldDate } from '@cloud-ru/ds-fields';
import { useState } from 'react';

const today = new Date();

function shift(days: number): Date {
  const date = new Date(today);
  date.setDate(date.getDate() + days);
  return date;
}

export function DatePresets() {
  const [value, setValue] = useState<[Date | undefined, Date | undefined]>([undefined, undefined]);
  return (
    <FieldDate
      label='Период'
      hint='Быстрые диапазоны в шапке календаря, выходные подсвечены'
      mode={DATE_MODE.DateRange}
      showHolidays
      presets={{
        enabled: true,
        items: [
          { id: 'last-7', label: 'Последние 7 дней', range: [shift(-6), today] },
          { id: 'last-30', label: 'Последние 30 дней', range: [shift(-29), today] },
          { id: 'next-7', label: 'Следующие 7 дней', range: [today, shift(6)] },
        ],
      }}
      value={value}
      onChange={setValue}
    />
  );
}

Props

Types

FieldDateProps

DateRangeValue

DateValue

FieldLayoutPresets

Related props

BuildCellPropsFunction

FieldLength

Placement

PresetsOptions

QuestionTooltipProps

Size

ValidationState

Storybook

Figma