ChipChoice.Date

Чип-фильтр с выбором даты. Открывает календарь в поповере, значение — объект Date. Поддерживает выбор даты, даты со временем, месяца и года через проп mode.

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

Для фильтрации списка или таблицы по дате в ряду чипов-фильтров.
Когда нужно выбрать конкретный день, месяц, год или дату со временем компактным контролом.

Когда не нужен ChipChoice.Date:

Для выбора диапазона дат — используйте ChipChoice.DateRange.
Для выбора только времени без даты — используйте ChipChoice.Time.
Для выбора из произвольного списка значений — используйте ChipChoice.Single.

Анатомия

Size (default `s`)

s — для плотных тулбаров и строк фильтров.
m — стандартный размер.
l — для крупных форм.

Mode

Режим выбора задаётся пропом mode (default date):

date — выбор конкретного дня.
date-time — выбор дня и времени; вместе с ним доступен showSeconds для отображения секунд.
month — выбор месяца.
year — выбор года.

Текст внутри чипа настраивается через valueRender(value) — функция получает текущий Date и возвращает узел для отображения.

Состояния

disabled — отключает взаимодействие.
loading — показывает спиннер и блокирует открытие календаря.

Установка

pnpm add @cloud-ru/ds-chips

import { ChipChoice } from '@cloud-ru/ds-chips'

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

Выбор даты

Выбор датыКонтролируемое значение через value и onChange

tsx

import { ChipChoice } from '@cloud-ru/ds-chips';
import { useState } from 'react';

export function ChoiceDateBasic() {
  const [value, setValue] = useState<Date | undefined>(new Date(2024, 0, 15));

  return <ChipChoice.Date label='Дата' value={value} onChange={setValue} />;
}

Дата и время

Дата и времяmode='date-time' с отображением секунд

tsx

import { ChipChoice } from '@cloud-ru/ds-chips';
import { useState } from 'react';

export function ChoiceDateTime() {
  const [value, setValue] = useState<Date | undefined>(new Date(2024, 0, 15, 9, 30, 0));

  return <ChipChoice.Date label='Дата и время' mode='date-time' showSeconds value={value} onChange={setValue} />;
}

Выбор месяца

Выбор месяцаmode='month'

tsx

import { ChipChoice } from '@cloud-ru/ds-chips';
import { useState } from 'react';

export function ChoiceDateMonth() {
  const [value, setValue] = useState<Date | undefined>(new Date(2024, 0, 1));

  return <ChipChoice.Date label='Месяц' mode='month' value={value} onChange={setValue} />;
}

Props

Types

PropsChipChoiceDateProps

Prop	Type	Default	Required	Description
`buildCalendarCellProps`	`BuildCellPropsFunction`	—	no	Колбек свойств для управления ячейками календаря
`className`	`string`	—	no	CSS-класс
`data-test-id`	`string`	—	no
`defaultValue`	`Date`	—	no	Значение компонента по-умолчанию
`disabled`	`boolean`	—	no	Отключён
`dropDownClassName`	`string`	—	no
`icon`	`ReactNode`	—	no	Иконка
`label`	`string`	—	no	Текст чипа
`loading`	`boolean`	—	no	Состояние загрузки
`mode`	`"date" \| "date-time" \| "month" \| "year"`	`date`	no	Режим выбора даты Режим выбора даты и времени Режим выбора даты без времени
`onChange`	`((value: Date) => void)`	—	no	Колбек смены значения
`onClearButtonClick`	`MouseEventHandler<HTMLButtonElement>`	—	no	Колбек для клика по кнопке очистки
`onClick`	`MouseEventHandler<HTMLButtonElement \| HTMLDivElement>`	—	no	Колбек обработки клика
`onOpenChange`	`((isOpen: boolean) => void)`	—	no	Колбек отображения компонента
`open`	`boolean`	—	no	Управляет состоянием показан/не показан
`placement`	`"bottom" \| "bottom-end" \| "bottom-start" \| "left" \| "left-end" \| "left-start" \| "right" \| "right-end" \| "right-start" \| "top" \| "top-end" \| "top-start"`	—	no	Расположение выпадающего меню
`showSeconds`	`boolean`	—	no	Показывать секунды в выборе и отображении времени
`size`	`"l" \| "m" \| "s"`	`m`	no	Размер
`tabIndex`	`number`	—	no	Индекс в порядке фокусировки
`truncateVariant`	`"end" \| "middle"`	`'middle'`	no	Вариант обрезания строки Вариант обрезания значения
`value`	`Date`	—	no	Значение компонента
`valueRender`	`((value?: Date) => ReactNode)`	—	no	Колбек формирующий строковое представление выбранного значения
`widthStrategy`	`"auto" \| "eq" \| "gte"`	`gte`	no	Стратегия управления шириной контейнера поповера

Storybook

Открыть в Storybook →

Figma

Открыть в Figma →

Смотри также

ChipChoice.DateRange — выбор диапазона дат.
ChipChoice.Time — выбор времени.
ChipChoice.Single — выбор одного значения из списка.