Skip to content

DatePicker

DatePicker and MonthPicker

Widget for selecting the date/month.

jsx
import { DatePicker, MonthPicker } from 'intergalactic/date-picker';
<DatePicker />;
<MonthPicker />;
import { DatePicker, MonthPicker } from 'intergalactic/date-picker';
<DatePicker />;
<MonthPicker />;

DatePickerProps

& & {...}
NameTypeDescription
valueThe selected date, accepts everything which is accepted by `new Date()`
onChange(date: ) => voidTo be activated upon selecting the date
disabled( | ( | false)[] | string)[]Array of dates blocked for selection
disabledErrorText((attemptedDate: ) => string) | string | nullError message when user attempts to input a disabled date
displayedPeriodDate for showing the necessary month
onDisplayedPeriodChange(date: ) => voidTo 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()`
defaultValueDefault value selected date, accepts everything which is accepted by `new Date()`
defaultDisplayedPeriodDefault 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.

jsx
import { DateRangePicker, MonthRangePicker } from 'intergalactic/date-picker';
<DateRangePicker />;
<MonthRangePicker />;
import { DateRangePicker, MonthRangePicker } from 'intergalactic/date-picker';
<DateRangePicker />;
<MonthRangePicker />;

DateRangePickerProps

& & {...}
NameTypeDescription
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()`
defaultDisplayedPeriodDefault value date for showing the necessary month
defaultHighlighted[]Default value selected date, accepts everything which is accepted by `new Date()`
onChange(date: []) => voidTo be activated upon selecting the date
disabled( | ( | false)[] | string)[]Array of dates blocked for selection
disabledErrorText((attemptedDate: ) => string) | string | nullError message when user attempts to input a disabled date
displayedPeriodDate for showing the necessary month
onDisplayedPeriodChange(date: ) => voidTo be activated upon changing the current shown month
highlighted[]The selected date, accepts everything which is accepted by `new Date()`
unclearablebooleanRemove the 'Reset' button
onHighlightedChange(date: []) => voidTo be activated upon selecting the date
preselectedValue[]Intermediate value between `highlighted` and `value` that user see before explicitly applying it.
onPreselectedValueChange(date: []) => voidNormally 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.

jsx
import { DatePicker } from 'intergalactic/date-picker';
<DatePicker.Trigger />;
import { DatePicker } from 'intergalactic/date-picker';
<DatePicker.Trigger />;

BaseTriggerProps

& & & & {...}
NameTypeDescription
size"m" | "l"Trigger size
state"normal" | "valid" | "invalid"Trigger state
activebooleanSets active state to trigger
emptybooleanResponsible for placeholder displaying
placeholderReact.ReactNodePlaceholder text
chevronbooleanDisplay the dropdowns chevron icon
disabledbooleanSets disabled state to trigger
theme"normal" | "valid" | "invalid" | falseTrigger theme

DateRangePicker.Period

Component for rendering the configurable periods.

jsx
import { DateRangePicker } from 'intergalactic/date-picker';
<DateRangePicker.Period />;
import { DateRangePicker } from 'intergalactic/date-picker';
<DateRangePicker.Period />;

DateRangePickerPeriodProps

& {...}
NameTypeDescription
value[]Current selected period
onChange(date: []) => voidTo be activated by clicking the button for switching the selected period.
onDisplayedPeriodChange(date: ) => voidTo be activated by hovering a cursor over the button for changing the current displayed month.
onHighlightedChange(date: []) => voidTo 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 📅

jsx
import { DatePicker, MonthPicker } from 'intergalactic/date-picker';
<DatePicker.Calendar />;
<MonthPicker.Calendar />;
import { DatePicker, MonthPicker } from 'intergalactic/date-picker';
<DatePicker.Calendar />;
<MonthPicker.Calendar />;

CalendarProps

& {...}
NameTypeDescription
locale["language"]Locale for displaying the days of a week and months, to be transferred to `Intl`
disabled( | ( | 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: []) => void
value[]The selected date, accepts everything which is accepted by `new Date()`
onChange(date: []) => voidTo be activated upon selecting the date
displayedPeriodDate for showing the necessary month
renderOutdatedboolean

Calendar.Unit

The unit inside the calendar.

jsx
import { DatePicker, MonthPicker } from 'intergalactic/date-picker';
<DatePicker.Calendar.Unit />;
<MonthPicker.Calendar.Unit />;
import { DatePicker, MonthPicker } from 'intergalactic/date-picker';
<DatePicker.Calendar.Unit />;
<MonthPicker.Calendar.Unit />;

CalendarUnitProps

& {...}
NameTypeDescription
selectedboolean
outdatedboolean
disabledboolean
todayboolean
startSelectedboolean
endSelectedboolean
highlightedboolean
startHighlightedboolean
endHighlightedboolean
date
childrenReact.ReactNode

DateRangeComparator

Same api for MonthDateRangeComparator.

DateRangeComparatorProps

& & {...}
NameTypeDescription
valueSelected date ranges
defaultValueDefault value for selected date ranges
defaultDisplayedPeriodDefault value date for showing the necessary month
defaultHighlighted[]Default value selected date, accepts everything which is accepted by `new Date()`
onChange(ranges: {value?: []; compare?: []}) => voidCalled with selected date when user clicks `Apply` button.
disabled( | ( | false)[] | string)[]Array of dates blocked for selection
disabledErrorText((attemptedDate: ) => string) | string | nullError message when user attempts to input a disabled date
displayedPeriodDate for showing the necessary month
onDisplayedPeriodChange(date: ) => voidTo be activated upon changing the current shown month
highlighted[]The selected date, accepts everything which is accepted by `new Date()`
onHighlightedChange(date: []) => voidTo be activated upon selecting the date
compareHighlighted[]The selected date, accepts everything which is accepted by `new Date()`
onCompareHighlightedChange(date: []) => voidTo be activated upon selecting the date
preselectedValue[]Intermediate value between `highlighted` and `value` that user see before explicitly applying it.
onPreselectedValueChange(date: []) => voidNormally 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: []) => voidNormally called when user preselects a compare range and when user applies ranges.
compareTogglebooleanControls that compare range input is enabled.
onCompareToggleChange(compareToggle: boolean) => voidToggles when compare range input enables or disables.
focusedRangeControls which date range is focused.
onFocusedRangeChange(focusedRange: ) => voidCalled when user focuses or is focused on some of the date ranges.
unclearablebooleanRemove the 'Reset' button
periods( & {value: []})[]Array of periods [{value: [new Date(), new Date()], children: "Today"}]

Released under the MIT License.

Released under the MIT License.