DatePicker
DatePicker and MonthPicker
Widget for selecting the date/month.
jsx
import { DatePicker, MonthPicker } from 'intergalactic/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.
jsx
import { DateRangePicker, MonthRangePicker } from 'intergalactic/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.
jsx
import { DatePicker } from 'intergalactic/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 |
chevron | boolean | Display the dropdowns chevron icon |
disabled | boolean | 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
& {...}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 📅
jsx
import { DatePicker, MonthPicker } from 'intergalactic/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 | ( | ( | 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 | |
renderOutdated | boolean |
Calendar.Unit
The unit inside the calendar.
jsx
import { DatePicker, MonthPicker } from 'intergalactic/date-picker';
<DatePicker.Calendar.Unit />;
<MonthPicker.Calendar.Unit />;
CalendarUnitProps
& {...}Name | Type | Description |
---|---|---|
selected | boolean | |
outdated | boolean | |
disabled | boolean | |
today | boolean | |
startSelected | boolean | |
endSelected | boolean | |
highlighted | boolean | |
startHighlighted | boolean | |
endHighlighted | boolean | |
date | ||
children | React.ReactNode |
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"}] |