Components / Calendar / Selection

Calendar Selection

  • Example
  • View Source
  • Change Theme
    Default Theme

Single Selection

Select a date by clicking on it - you can choose only one.

Today
Su Mo Tu We Th Fr Sa
  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        
             
Selected Date

Multiple Selection

Select several dates by holding down the Shift or Ctrl keys when clicking on it.

Today
Su Mo Tu We Th Fr Sa
      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 Dates

Range Selection

When you select the first date, it is marked as the start of the range and the Calendar will highlight the range you would choose with the second click.

Today
Su Mo Tu We Th Fr Sa
      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  
             
Su Mo Tu We Th Fr Sa
            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 Range
Range Start: 01 Apr 2019
Range End: 10 Apr 2019
Loading the demo source code...please wait.

Suggested Links