This Calendar was developed using Hooks and Javascript date object without any dependencies. The calendar has options where users can choose between single-date, multiple-date, range and slots booking features.
This package uses React hooks. Make sure you're running react >= 16.8.0 version.
Installation
# NPM npm i react-select-date
# YARN yarn add react-select-date
Basic Usage
Example: Single Select
The single-date selection is a fully controlled component that allows users to select a single date from the calendar table.
Sun
Mon
Tue
Wed
Thu
Fri
Sat
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
31
Selected Date
Disabled Date
VIEW CODE
Example: Multi Select
The multiple Date selection is a fully controlled component that allows users to select multiple dates.
Sun
Mon
Tue
Wed
Thu
Fri
Sat
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
31
Selected Date
Disabled Date
VIEW CODE
Example: Range Select
The dateRange is a fully controlled component that allows users to select a date range. The user can select the date range from either the date-input field or the calendar table.
Sun
Mon
Tue
Wed
Thu
Fri
Sat
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
31
Selected Date
Disabled Date
VIEW CODE
Slot Booking
Slots booking is a fully controlled component that allows users to view the avilable and total slots.
Example: Single Slot
Sun
Mon
Tue
Wed
Thu
Fri
Sat
19
1
14
2
4
3
2
4
5
5
21
6
10
7
27
8
30
9
2
10
1
11
18
12
20
13
21
14
10
15
11
16
27
17
30
18
21
19
24
20
30
21
23
22
29
23
10
24
13
25
9
26
28
27
24
28
1
29
7
30
10
31
Selected Date
Disabled Date
Available Slots
VIEW CODE
Example: Duel Slots
Sun
Mon
Tue
Wed
Thu
Fri
Sat
17
1
30
14
2
30
17
3
30
23
4
30
23
5
30
7
6
30
27
7
30
19
8
30
15
9
30
11
10
30
24
11
30
11
12
30
5
13
30
26
14
30
17
15
30
17
16
30
8
17
30
28
18
30
1
19
30
17
20
30
2
21
30
24
22
30
3
23
30
8
24
30
16
25
30
20
26
30
9
27
30
27
28
30
1
29
30
13
30
30
6
31
30
Selected Date
Disabled Date
Available Slots
Total Slots
VIEW CODE
Disable Dates
Example: MinDate and MaxDate
Defines the minimum and maximam date to show in the calender.
Sun
Mon
Tue
Wed
Thu
Fri
Sat
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
31
Selected Date
Disabled Date
VIEW CODE
Example: Disable Specific Dates and Disable Days
Defines the disable specific dates and disable days to show in the calender.
CodeSandbox