DatePicker

Components

DatePicker and MonthPicker

Widget for selecting the date/month.

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

interface

IDatePickerProps extends IDropdownProps, IWithI18nEnhanceProps

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 />;

interface

IDateRangePickerProps extends IDropdownProps, IWithI18nEnhanceProps

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 `(ComponentProps<typeof Button> & {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 button, exists by default. DateRangePicker has the same interface.

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

interface

IBaseTriggerProps extends IBoxProps, INeighborItemProps, IKeyboardFocusProps, 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 />;

interface

IDateRangePickerPeriodProps extends IBoxProps

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 `(ComponentProps<typeof Button> & {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 />;

interface

ICalendarProps extends IBoxProps

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

The unit inside the calendar.

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

interface

ICalendarUnitProps extends IBoxProps