Single Date
A simple datepicker component build with date-fns.
Since this component doesn't hold the selected day in its state, you have to hold it in your component's state as the user interacts with the calendar.
For this, you can use the following props: date - to highlight the day cell to show in the calendar which day has been selected; onDateChange - handler is holding the selected day in its own state;
You also can configure the component with config prop.
For example, if you want to mark days as disabled, you can use config.disabledDays setting. These days do not respond to the user's interaction and should appear as “disabled” (grayed out) on the calendar.
Or you can set the range of available for choosing years, using config.yearsRang prop.
The whole list of all available props is in the table below.
Datepicker - this component is rendering the Button component and Calendar in an overlay. It has extended props and hide/show logic out of the box.
Datepicker
You also can use only the Calendar component if you have another trigger element (for example input instead of button) and you need more control.
Calendar
Calendar: Marking day as disabled
Calendar: Marking several days as disabled
Calendar: Marking days range as disabled
Calendar: Marking inner days range as disabled
Props for Calendar component
Name | Type | Required | Default | Description |
---|---|---|---|---|
date | Date | No | - | Day (initialDate) that should appear as selected. |
onDateChange | ({ date }: { date?: Date }) => void | Yes | - | Event handler when the user clicks on a day cell. |
config | Config | No | - | An object of calendar configuration |
hasClickedOutside | boolean | No | false | Used with useClickOutside() hook |
Config: calendar configuration
Name | Type | Required | Default | Description |
---|---|---|---|---|
weekStartsOn | 0 | 1 | 2 | 3 | 4 | 5 | 6 | No | 1 | Overwrites the first day of the week. |
monthLabelFormat | string | No | MMMM | Sets formatted month label according to the pattern |
yearLabelFormat | string | No | yyyy | Sets formatted year label according to the pattern |
disabledDays | Date | Date[] | DisabledDaysRange: { from?: Date; to?: Date; } | No | - | Day(s) that should appear as disabled |
yearsRange | { min?: number; max?: number; } | No | - | Sets possible choosing years range |
DatePicker has the same props as Calendar and extended by next props:
DatePicker extended props
Name | Type | Required | Default | Description |
---|---|---|---|---|
isOpenByDefault | boolean | No | - | Sets is Calendar open by default |
translations | { placeholder: string | JSX.Element; apply: string | JSX.Element; reset: string | JSX.Element; } | Yes | - | An object with with preset translations for button and calendar |
Config extended for DatePicker
Name | Type | Required | Default | Description |
---|---|---|---|---|
format | string | No | yyyy-MM-dd | Sets formatted placeholder for button according to the pattern |