DatePicker

Components

DatePicker and MonthPicker

Widget for selecting the date/month.

import { DatePicker, MonthPicker } from '@semcore/ui/date-picker';
<DatePicker />;
<MonthPicker />;

type

DatePickerProps

DropdownProps & WithI18nEnhanceProps & {...}

Property	Description
value `DateConstructorParams`	The selected date, accepts everything which is accepted by `new Date()`
onChange `(date: Date) => void`	To be activated upon selecting the date
disabled `(Date \| (Date \| false)[] \| string)[]`	Array of dates blocked for selection
displayedPeriod `DateConstructorParams` = new Date()	Date for showing the necessary month
onDisplayedPeriodChange `(date: Date) => void`	To be activated upon changing the current shown month
size `"m" \| "l"` = m	Component size
highlighted `DateConstructorParams[]`	The selected date, accepts everything which is accepted by `new Date()`
defaultValue `DateConstructorParams`	Default value selected date, accepts everything which is accepted by `new Date()`
defaultDisplayedPeriod `DateConstructorParams`	Default value date for showing the necessary month
defaultHighlighted `DateConstructorParams[]`	Default value selected date, accepts everything which is accepted by `new Date()`

Widget for selecting the range of dates/months.

import { DateRangePicker, MonthRangePicker } from '@semcore/ui/date-picker';
<DateRangePicker />;
<MonthRangePicker />;

type

DateRangePickerProps

DropdownProps & WithI18nEnhanceProps & {...}

Property	Description
value `DateConstructorParams[]`	The selected date, accepts everything which is accepted by `new Date()`
defaultValue `DateConstructorParams[]`	Default value selected date, accepts everything which is accepted by `new Date()`
defaultDisplayedPeriod `DateConstructorParams`	Default value date for showing the necessary month
defaultHighlighted `DateConstructorParams[]`	Default value selected date, accepts everything which is accepted by `new Date()`
onChange `(date: Date[]) => void`	To be activated upon selecting the date
disabled `(Date \| (Date \| false)[] \| string)[]`	Array of dates blocked for selection
displayedPeriod `DateConstructorParams` = new Date()	Date for showing the necessary month
onDisplayedPeriodChange `(date: Date) => void`	To be activated upon changing the current shown month
size `"m" \| "l" \| "xl"` = m	Component size
highlighted `DateConstructorParams[]`	The selected date, accepts everything which is accepted by `new Date()`
unclearable `boolean`	Remove the 'Reset' button
onHighlightedChange `(date: Date[]) => void`	To be activated upon selecting the date
periods `(ButtonProps & {value: Date[]})[]` = Past 2 days / Past week / Past 2 week / Past month / Past 2 month	Array of periods [{value: [new Date(), new Date()], children: "Today"}]

Trigger input, exists by default. DateRangePicker has the same interface.

import { DatePicker } from '@semcore/ui/date-picker';
<DatePicker.Trigger />;

type

BaseTriggerProps

BoxProps & NeighborItemProps & KeyboardFocusProps & IWithAnimatedSizeEnhanceProps & {...}

Property	Description
size `"m" \| "l"` = m	Trigger size
state `"normal" \| "valid" \| "invalid"`	Trigger state
active `boolean`	Sets active state to trigger
empty `boolean`	Responsible for placeholder displaying
placeholder `React.ReactNode`	Placeholder text
disabled `boolean`	Sets disabled state to trigger
theme `"normal" \| "valid" \| "invalid" \| false` use `IBaseTriggerProps.state` instead	Trigger theme

Component for rendering the configurable periods.

import { DateRangePicker } from '@semcore/ui/date-picker';
<DateRangePicker.Period />;

type

DateRangePickerPeriodProps

BoxProps & {...}

Property	Description
value `DateConstructorParams[]`	Current selected period
onChange `(date: Date[]) => void`	To be activated by clicking the button for switching the selected period.
onDisplayedPeriodChange `(date: Date) => void`	To be activated by hovering a cursor over the button for changing the current displayed month.
onHighlightedChange `(date: Date[]) => void`	To be activated by hovering a cursor over the button for selecting the dates.
periods `(ButtonProps & {value: Date[]})[]` = Past 2 days / Past week / Past 2 week / Past month / Past 2 month	Array of periods [{value: [new Date(), new Date()], children: "Today"}]

Calendar component 📅

import { DatePicker, MonthPicker } from '@semcore/ui/date-picker';
<DatePicker.Calendar />;
<MonthPicker.Calendar />;

type

CalendarProps

BoxProps & {...}

Property	Description
locale `NavigatorLanguage["language"]` = en	Locale for displaying the days of a week and months, to be transferred to `Intl`
disabled `(Date \| (Date \| false)[] \| string)[]`	Array of dates blocked for selection Accepts the date or the range of dates for specifying infinity ([Date \| false, Date \| false]), crontab(6,7)
highlighted `DateConstructorParams[]`
onHighlightedChange `(date: Date[]) => void`
value `DateConstructorParams[]`	The selected date, accepts everything which is accepted by `new Date()`
onChange `(date: Date[]) => void`	To be activated upon selecting the date
displayedPeriod `Date` = new Date()	Date for showing the necessary month
renderOutdated `boolean`

The unit inside the calendar.

import { DatePicker, MonthPicker } from '@semcore/ui/date-picker';
<DatePicker.Calendar.Unit />;
<MonthPicker.Calendar.Unit />;

type

CalendarUnitProps

BoxProps & {...}