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	React.ReactNode	Placeholder text
disabled	boolean	Sets disabled state to trigger
theme	"normal" | "valid" | "invalid" | false	Deprecated Trigger theme

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	React.ReactNode	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"}]