DatePicker
DatePicker and MonthPicker
Widget for selecting the date/month.
import { DatePicker, MonthPicker } from '@semcore/ui/date-picker';
<DatePicker />;
<MonthPicker />;
DatePickerProps
DropdownProps & WithI18nEnhanceProps & {...}
Property | Description |
---|---|
value | The selected date, accepts everything which is accepted by |
onChange (date: Date) => void | To be activated upon selecting the date |
disabled | Array of dates blocked for selection |
displayedPeriod DateConstructorParams = new Date() | 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 |
defaultValue | Default value selected date, accepts everything which is accepted by |
defaultDisplayedPeriod | Default value date for showing the necessary month |
defaultHighlighted | Default value selected date, accepts everything which is accepted by |
DateRangePicker
Widget for selecting the range of dates/months.
import { DateRangePicker, MonthRangePicker } from '@semcore/ui/date-picker';
<DateRangePicker />;
<MonthRangePicker />;
DateRangePickerProps
DropdownProps & WithI18nEnhanceProps & {...}
Property | Description |
---|---|
value | The selected date, accepts everything which is accepted by |
defaultValue | Default value selected date, accepts everything which is accepted by |
defaultDisplayedPeriod | Default value date for showing the necessary month |
defaultHighlighted | Default value selected date, accepts everything which is accepted by |
onChange (date: Date[]) => void | To be activated upon selecting the date |
disabled | Array of dates blocked for selection |
displayedPeriod DateConstructorParams = new Date() | 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 |
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 />;
BaseTriggerProps
BoxProps & NeighborItemProps & KeyboardFocusProps & IWithAnimatedSizeEnhanceProps & {...}
Property | Description |
---|---|
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 />;
DateRangePickerPeriodProps
BoxProps & {...}
Property | Description |
---|---|
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 />;
CalendarProps
BoxProps & {...}
Property | Description |
---|---|
locale NavigatorLanguage["language"] = en | Locale for displaying the days of a week and months, to be transferred to |
disabled | 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 |
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 />;