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

September
  
2020
M
T
W
T
F
S
S
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

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

February
  
2021
M
T
W
T
F
S
S
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

Calendar: Marking day as disabled

September
  
2020
M
T
W
T
F
S
S
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

Calendar: Marking several days as disabled

September
  
2020
M
T
W
T
F
S
S
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

Calendar: Marking days range as disabled

September
  
2020
M
T
W
T
F
S
S
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

Calendar: Marking inner days range as disabled

September
  
2020
M
T
W
T
F
S
S
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

Props for Calendar component

NameTypeRequiredDefaultDescription
dateDateNo-Day (initialDate) that should appear as selected.
onDateChange({ date }: { date?: Date }) => voidYes-Event handler when the user clicks on a day cell.
configConfigNo-An object of calendar configuration
hasClickedOutsidebooleanNofalseUsed with useClickOutside() hook

Config: calendar configuration

NameTypeRequiredDefaultDescription
weekStartsOn0 | 1 | 2 | 3 | 4 | 5 | 6No1Overwrites the first day of the week.
monthLabelFormatstringNoMMMMSets formatted month label according to the pattern
yearLabelFormatstringNoyyyySets formatted year label according to the pattern
disabledDaysDate | 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

NameTypeRequiredDefaultDescription
isOpenByDefaultbooleanNo-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

NameTypeRequiredDefaultDescription
formatstringNoyyyy-MM-ddSets formatted placeholder for button according to the pattern