ChipChoice.DateRange

Чип-фильтр с выбором диапазона дат. Открывает календарь в поповере, значение — кортеж [Date, Date] с начальной и конечной датой периода.

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

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

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

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

Анатомия

Size (default `s`)

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

Value — период

Значение — кортеж из двух дат [Date, Date]:

первый элемент — начало периода.
второй элемент — конец периода.

Текст внутри чипа настраивается через valueRender(value) — функция получает текущий кортеж [Date, 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 ChoiceDateRangeBasic() {
  const [value, setValue] = useState<[Date, Date] | undefined>([new Date(2024, 0, 15), new Date(2024, 0, 22)]);

  return <ChipChoice.DateRange label='Период' value={value} onChange={setValue} />;
}

Неконтролируемый режим

Неконтролируемый режимНачальный период через defaultValue

tsx

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

export function ChoiceDateRangeUncontrolled() {
  return <ChipChoice.DateRange label='Период' defaultValue={[new Date(2024, 0, 15), new Date(2024, 0, 22)]} />;
}

Props

Types

PropsChipChoiceDateRangeProps

Prop	Type	Default	Required	Description
`buildCalendarCellProps`	`BuildCellPropsFunction`	—	no	Колбек свойств для управления ячейками календаря
`className`	`string`	—	no	CSS-класс
`data-test-id`	`string`	—	no
`defaultValue`	`Range`	—	no	Значение компонента по умолчанию
`disabled`	`boolean`	—	no	Отключён
`dropDownClassName`	`string`	—	no
`icon`	`ReactNode`	—	no	Иконка
`label`	`string`	—	no	Текст чипа
`loading`	`boolean`	—	no	Состояние загрузки
`onChange`	`((value: Range) => 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	Расположение выпадающего меню
`size`	`"l" \| "m" \| "s"`	`m`	no	Размер
`tabIndex`	`number`	—	no	Индекс в порядке фокусировки
`truncateVariant`	`"end" \| "middle"`	`'middle'`	no	Вариант обрезания строки Вариант обрезания значения
`value`	`Range`	—	no	Значение компонента
`valueRender`	`((value?: Range) => ReactNode)`	—	no	Колбек формирующий строковое представление выбранного значения
`widthStrategy`	`"auto" \| "eq" \| "gte"`	`gte`	no	Стратегия управления шириной контейнера поповера

Storybook

Открыть в Storybook →

Figma

Открыть в Figma →

Смотри также

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