DatePicker and MonthPicker

Widget for selecting the date/month.

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

DatePickerProps

& & {...}

Name	Type	Description
value		The selected date, accepts everything which is accepted by `new Date()`
onChange	(date: ) => void	To be activated upon selecting the date
disabled	( | ( | false)[] | string)[]	Array of dates blocked for selection
disabledErrorText	((attemptedDate: ) => string) | string | null	Error message when user attempts to input a disabled date
displayedPeriod		Date for showing the necessary month
onDisplayedPeriodChange	(date: ) => void	To be activated upon changing the current shown month
size	"m" | "l"	Component size
highlighted	[]	The selected date, accepts everything which is accepted by `new Date()`
defaultValue		Default value selected date, accepts everything which is accepted by `new Date()`
defaultDisplayedPeriod		Default value date for showing the necessary month
defaultHighlighted	[]	Default value selected date, accepts everything which is accepted by `new Date()`

DateRangePicker

Widget for selecting the range of dates/months.

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

DateRangePickerProps

& & {...}

Name	Type	Description
value	[]	The selected date, accepts everything which is accepted by `new Date()`
defaultValue	[]	Default value selected date, accepts everything which is accepted by `new Date()`
defaultDisplayedPeriod		Default value date for showing the necessary month
defaultHighlighted	[]	Default value selected date, accepts everything which is accepted by `new Date()`
onChange	(date: []) => void	To be activated upon selecting the date
disabled	( | ( | false)[] | string)[]	Array of dates blocked for selection
disabledErrorText	((attemptedDate: ) => string) | string | null	Error message when user attempts to input a disabled date
displayedPeriod		Date for showing the necessary month
onDisplayedPeriodChange	(date: ) => void	To be activated upon changing the current shown month
highlighted	[]	The selected date, accepts everything which is accepted by `new Date()`
unclearable	boolean	Remove the 'Reset' button
onHighlightedChange	(date: []) => void	To be activated upon selecting the date
preselectedValue	[]	Intermediate value between `highlighted` and `value` that user see before explicitly applying it.
onPreselectedValueChange	(date: []) => void	Normally called when user preselects a date range and when user applies this range.
periods	( & {value: [] })[]	Array of periods [{value: [new Date(), new Date()], children: "Today"}]

DatePicker.Trigger and DateRangePicker.Trigger

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

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

BaseTriggerProps

& & & {...}

Name	Type	Description
size	"m" | "l"	Trigger size
state	"normal" | "valid" | "invalid"	Trigger state
active	boolean	Sets active state to trigger
empty	boolean	Responsible for placeholder displaying
placeholder		Placeholder text
disabled	boolean	Sets disabled state to trigger

DateRangePicker.Period

Component for rendering the configurable periods.

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

DateRangePickerPeriodProps

& {...}

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

Calendar

Calendar component 📅

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

CalendarProps

& {...}

Name	Type	Description
locale	["language"]	Locale for displaying the days of a week and months, to be transferred to `Intl`
disabled		Array of dates blocked for selection
value	[]	The selected date, accepts everything which is accepted by `new Date()`
onChange	(date: []) => void	To be activated upon selecting the date
displayedPeriod		Date for showing the necessary month
renderOutdated	boolean	Controls whether to render dates from previous/next months

Calendar.Unit

The unit inside the calendar.

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

CalendarUnitProps

& {...}

Name	Type	Description
selected	boolean	Indicates if the calendar unit is part of a selected date range
outdated	boolean	Marks units from previous/next months that appear in the current month view
disabled	boolean	Prevents interaction with the unit
today	boolean	Highlights the current date
startSelected	boolean	Marks the beginning of a selected date range
endSelected	boolean	Marks the end of a selected date range
highlighted	boolean	Shows preview highlighting during range selection
startHighlighted	boolean	Marks the start of a highlighted range
endHighlighted	boolean	Marks the end of a highlighted range
date		The actual Date object this unit represents
children		Content to display within the unit (typically the day number)

DateRangeComparator

Same API for MonthDateRangeComparator.

DateRangeComparatorProps

& & {...}

Name	Type	Description
value		Selected date ranges
defaultValue		Default value for selected date ranges
defaultDisplayedPeriod		Default value date for showing the necessary month
defaultHighlighted	[]	Default value selected date, accepts everything which is accepted by `new Date()`
onChange	(ranges: {value?: []; compare?: [] }) => void	Called with selected date when user clicks `Apply` button.
disabled	( | ( | false)[] | string)[]	Array of dates blocked for selection
disabledErrorText	((attemptedDate: ) => string) | string | null	Error message when user attempts to input a disabled date
displayedPeriod		Date for showing the necessary month
onDisplayedPeriodChange	(date: ) => void	To be activated upon changing the current shown month
highlighted	[]	The selected date, accepts everything which is accepted by `new Date()`
onHighlightedChange	(date: []) => void	To be activated upon selecting the date
compareHighlighted	[]	The selected date, accepts everything which is accepted by `new Date()`
onCompareHighlightedChange	(date: []) => void	To be activated upon selecting the date
preselectedValue	[]	Intermediate value between `highlighted` and `value` that user see before explicitly applying it.
onPreselectedValueChange	(date: []) => void	Normally called when user preselects a date range and when user applies this range.
preselectedCompare	[]	Intermediate value between `compareHighlighted` and `compare` that user see before explicitly applying it.
onPreselectedCompareChange	(date: []) => void	Normally called when user preselects a compare range and when user applies ranges.
compareToggle	boolean	Controls that compare range input is enabled.
onCompareToggleChange	(compareToggle: boolean) => void	Toggles when compare range input enables or disables.
focusedRange		Controls which date range is focused.
onFocusedRangeChange	(focusedRange: ) => void	Called when user focuses or is focused on some of the date ranges.
unclearable	boolean	Remove the 'Reset' button
periods	( & {value: [] })[]	Array of periods [{value: [new Date(), new Date()], children: "Today"}]