Skip to content

DatePicker

Components4.10.2

DatePicker and MonthPicker

Widget for selecting the date/month.

import { DatePicker, MonthPicker } from '@semcore/ui/date-picker';
<DatePicker />;
<MonthPicker />;
typeDatePickerProps
DropdownProps & WithI18nEnhanceProps & {...}
PropertyDescription
value

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

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

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 />;
typeDateRangePickerProps
DropdownProps & WithI18nEnhanceProps & {...}
PropertyDescription
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: Date[]) => void

To be activated upon selecting the date

disabled
(Date | (Date | false)[] | string)[]

Array of dates blocked for selection

displayedPeriod

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

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"}]

DatePicker.Trigger and DateRangePicker.Trigger

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

import { DatePicker } from '@semcore/ui/date-picker';
<DatePicker.Trigger />;
typeBaseTriggerProps
BoxProps & NeighborItemProps & KeyboardFocusProps & IWithAnimatedSizeEnhanceProps & {...}
PropertyDescription
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

DateRangePicker.Period

Component for rendering the configurable periods.

import { DateRangePicker } from '@semcore/ui/date-picker';
<DateRangePicker.Period />;
typeDateRangePickerPeriodProps
BoxProps & {...}
PropertyDescription
value

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

Calendar component 📅

import { DatePicker, MonthPicker } from '@semcore/ui/date-picker';
<DatePicker.Calendar />;
<MonthPicker.Calendar />;
typeCalendarProps
BoxProps & {...}
PropertyDescription
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
onHighlightedChange
(date: Date[]) => void
value

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

Calendar.Unit

The unit inside the calendar.

import { DatePicker, MonthPicker } from '@semcore/ui/date-picker';
<DatePicker.Calendar.Unit />;
<MonthPicker.Calendar.Unit />;
typeCalendarUnitProps
BoxProps & {...}
PropertyDescription
selected
boolean
outdated
boolean
disabled
boolean
today
boolean
startSelected
boolean
endSelected
boolean
highlighted
boolean
startHighlighted
boolean
endHighlighted
boolean
date
children
React.ReactNode