Developer 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
& & {...}| 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 />;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 />;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 />;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 />;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 />;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"}] |