@snack-uikit/calendar

Calendar

Installation

npm i @snack-uikit/calendar

Changelog

Example

import { Calendar } from '@snack-uikit/calendar';

<Calendar
  mode='date'
  onChangeValue={(selectedDate: Date) => {
    // do something
  }}
/>

<Calendar
  mode='range'
  onChangeValue={(selectedRange: [Date, Date]) => {
    // do something
  }}
/>

Calendar

Props

name	type	default value	description
mode*	"date" | "date-time" | "range" | "month" | "year"	-	Режим работы календаря: - date - режим выбора даты - range - режим выбора периода - month - режим выбора месяца - date-time - режим выбора даты и времени - year - режим выбора года
size	enum Size: "s", "m", "l"	m	Размер
today	number | Date	-	Дата сегодняшнего дня
showHolidays	boolean	-	Раскрашивает субботу и воскресенье
buildCellProps	(date: Date, viewMode: ViewMode) => { isDisabled?: boolean; isHoliday?: boolean } ;	-	Колбек установки свойств ячеек календаря. Вызывается на построение каждой ячейки. Принимает два параметра: Date - дата ячейки ViewMode: - month отображение месяца, каждая ячейка - 1 день - year отображение года, каждая ячейка - 1 месяц - decade отображение декады, каждая ячейка - 1 год Колбек должен возвращать объект с полями, отвечающими за отключение и подкраску ячейки.
className	string	-	CSS-класс контейнера
fitToContainer	boolean	true	Отключает предустановленный размер, заставляя компонент подстраиваться к размеру контейнра: (width: 100%, height: 100%).
style	CSSProperties	-	Объект со стилями на контейнер.
autofocus	boolean	-	Автофокус
locale	Intl.Locale	Проставляется в соответствие с языком в настройках браузера	Локаль, в соответствие с которой выставляется язык названий и первый день недели
onFocusLeave	(direction: FocusDirection) => void	-	Колбек потери фокуса. Вызывается со значением next, когда фокус покидает компонент, передвигаясь вперед, по клавише tab. Со значением prev - по клавише стрелки вверх или shift + tab.
navigationStartRef	RefObject<{ focus(): void; }>	-	Ссылка на управление первым элементом навигации
value	Date | Range	-	Выбранное значение. - в режиме date тип Date - в режиме range тип Range ([Date, Date]) - в режиме month тип Date - в режиме date-time тип Date - в режиме year тип Date
defaultValue	Date | Range	-	Значение по-умолчанию для uncontrolled. - в режиме date тип Date - в режиме range тип Range ([Date, Date]) - в режиме month тип Date - в режиме date-time тип Date - в режиме year тип Date
onChangeValue	((value: Date) => void) | ((value: Range) => void) | ((value: Date) => void) | ((value: Date) => void) | ((value: Date) => void)	-	Колбек выбора значения. - в режиме date принимает тип Date - в режиме range принимает тип Range - в режиме month принимает тип Date - в режиме date-time принимает тип Date - в режиме year принимает тип Date
showSeconds	boolean	-	Показывать ли секунды (только в режиме date-time)

TimePicker

Props

name	type	default value	description
value	TimeValue	-	Выбранное значение.
today	number | Date	-	Дата сегодняшнего дня
defaultValue	TimeValue	-	Значение по-умолчанию для uncontrolled.
onChangeValue	(value?: TimeValue) => void	-	Колбек выбора значения
showSeconds	boolean	true	Показывать ли секунды
size	enum Size: "s", "m", "l"	m	Размер
className	string	-	CSS-класс контейнера
fitToContainer	boolean	true	Отключает предустановленный размер, заставляя компонент подстраиваться к размеру контейнра: (width: 100%, height: 100%).
onFocusLeave	(direction: FocusDirection) => void	-	Колбек потери фокуса. Вызывается со значением next, когда фокус покидает компонент, передвигаясь вперед, по клавише tab. Со значением prev - по клавише стрелки вверх или shift + tab.
navigationStartRef	RefObject<{ focus(): void; }>	-	Ссылка на управление первым элементом навигации