Skip to content

DatePicker

DatePicker and MonthPicker

Widget for selecting the date/month.

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

DatePickerProps

& & {...}
NameTypeDescription
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.

jsx
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()`
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()`
unclearableboolean 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.

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

BaseTriggerProps

& & & & {...}
NameTypeDescription
size"m" | "l" Trigger size
state"normal" | "valid" | "invalid" Trigger state
activeboolean Sets active state to trigger
emptyboolean Responsible for placeholder displaying
placeholderReact.ReactNode Placeholder text
chevronboolean Display the dropdowns chevron icon
disabledboolean Sets disabled state to trigger
theme"normal" | "valid" | "invalid" | false Trigger theme

DateRangePicker.Period

Component for rendering the configurable periods.

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

DateRangePickerPeriodProps

& {...}
NameTypeDescription
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 📅

jsx
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: []) => void To be activated upon selecting the date
displayedPeriod Date 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 />;

CalendarUnitProps

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

DateRangeComparator

Same API for MonthDateRangeComparator.

DateRangeComparatorProps

& & {...}
NameTypeDescription
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.
compareToggleboolean 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.
unclearableboolean Remove 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.