Date picker
Examples
Base
<chi-label for="date">Date</chi-label>
<chi-date-picker id="date"></chi-date-picker>
This HTML Blueprint requires JavaScript.
You may use your own solution, or use Chi's vanilla JavaScript solution,
Chi.js.
<div class="chi-form__item">
<label class="chi-label" for="datepicker-1">Date</label>
<div class="chi-input__wrapper -icon--right">
<input id="datepicker-1" type="text" class="chi-input" placeholder="MM/DD/YYYY">
<i class="chi-icon icon-date" aria-hidden="true"></i>
</div>
</div>
<script>chi.datePicker(document.getElementById('datepicker-1'));</script>
Disabled
<chi-label for="date-2">Date</chi-label>
<chi-date-picker id="date-2" disabled></chi-date-picker>
This HTML Blueprint requires JavaScript.
You may use your own solution, or use Chi's vanilla JavaScript solution,
Chi.js.
<div class="chi-form__item">
<label class="chi-label" for="datepicker-2">Date</label>
<div class="chi-input__wrapper -disabled -icon--right">
<input id="datepicker-2" type="text" class="chi-input" placeholder="MM/DD/YYYY" disabled>
<i class="chi-icon icon-date" aria-hidden="true"></i>
</div>
</div>
<script>chi.datePicker(document.getElementById('datepicker-2'));</script>
Value, min and max options
<chi-label for="date-3">Date</chi-label>
<chi-date-picker id="date-3" value="01/24/2019" min="01/14/2019" max="02/07/2019">
This HTML Blueprint requires JavaScript.
You may use your own solution, or use Chi's vanilla JavaScript solution,
Chi.js.
<div class="chi-form__item">
<label class="chi-label" for="datepicker-3">Date</label>
<div class="chi-input__wrapper -icon--right">
<input id="datepicker-3" type="text" class="chi-input" value="01/24/2019" min="01/14/2019" max="02/07/2019" placeholder="MM/DD/YYYY">
<i class="chi-icon icon-date" aria-hidden="true"></i>
</div>
</div>
<script>chi.datePicker(document.getElementById('datepicker-3'));</script>
<!-- Or configure programmatically -->
<script>
chi.datePicker(
document.getElementById('datepicker-3'),
{
date: '01/24/2019',
min: '01/24/2019'
}
);
</script>
Excluded week days
Specify which week days to disable by using excluded-weekdays="0, 6"
attribute
<chi-label for="date-excluded-weekdays">Date</chi-label>
<chi-date-picker id="date-excluded-weekdays" excluded-weekdays="0, 6"></chi-date-picker>
Excluded dates
Specify which dates to disable by using excluded-dates="02/24/2020, 05/25/2020"
attribute
Separate dates with a comma
<chi-label for="date-excluded-dates">Date</chi-label>
<chi-date-picker id="date-excluded-dates" excluded-dates="02/24/2020, 05/25/2020, 07/03/2020, 09/12/2020, 12/12/2020"></chi-date-picker>
Excluded dates and week days
Disable dates - excluded-dates="02/24/2020, 05/25/2020"
Disable days - excluded-weekdays="0, 6"
<chi-label for="date-excluded-days-dates">Date</chi-label>
<chi-date-picker id="date-excluded-days-dates" excluded-weekdays="0, 6" excluded-dates="01/24/2020, 05/25/2020, 07/03/2020, 09/12/2020, 12/12/2020"></chi-date-picker>
Date Time
<chi-label for="date-time">Date</chi-label>
<chi-date-picker id="date-time" mode="datetime"></chi-date-picker>
Multiple dates
Use the attribute multiple
to allow the user to select multiple dates.
<chi-label for="multiple-dates">Date</chi-label>
<chi-date-picker id="multiple-dates" multiple></chi-date-picker>
Calendar
An example of a date picker calendar not attached to any element.
Base
<chi-date></chi-date>
This HTML Blueprint requires JavaScript.
You may use your own solution, or use Chi's vanilla JavaScript solution,
Chi.js.
Use the classes
Use the classes
Use the class
Use the classes
-month-starts-on-sun
,
-month-starts-on-mon
, -month-starts-on-tue
, -month-starts-on-wed
,
-month-starts-on-thu
, -month-starts-on-fri
and -month-starts-on-sat
to
locate the first day in the correct cell.Use the classes
-week-starts-on-sun
or -week-starts-on-mon
to fit the week definition
of the desired locale.Use the class
-today
for the current date<div class="chi-datepicker -week-starts-on-sun -month-starts-on-wed">
<div class="chi-datepicker__month-row">
<div class="prev">
<i class="chi-icon icon-chevron-left -sm" aria-hidden="true"></i>
</div>
<div class="chi-datepicker__month">
November 2018
</div>
<div class="next">
<i class="chi-icon icon-chevron-right -sm" aria-hidden="true"></i>
</div>
</div>
<div class="chi-datepicker__day-names">
<div class="chi-datepicker__week-day">
S
</div>
<div class="chi-datepicker__week-day">
M
</div>
<div class="chi-datepicker__week-day">
T
</div>
<div class="chi-datepicker__week-day">
W
</div>
<div class="chi-datepicker__week-day">
T
</div>
<div class="chi-datepicker__week-day">
F
</div>
<div class="chi-datepicker__week-day">
S
</div>
</div>
<div class="chi-datepicker__days">
<div class="chi-datepicker__day">1</div>
<div class="chi-datepicker__day">2</div>
<div class="chi-datepicker__day">3</div>
<div class="chi-datepicker__day">4</div>
<div class="chi-datepicker__day">5</div>
<div class="chi-datepicker__day">6</div>
<div class="chi-datepicker__day">7</div>
<div class="chi-datepicker__day">8</div>
<div class="chi-datepicker__day">9</div>
<div class="chi-datepicker__day">10</div>
<div class="chi-datepicker__day">11</div>
<div class="chi-datepicker__day">12</div>
<div class="chi-datepicker__day">13</div>
<div class="chi-datepicker__day">14</div>
<div class="chi-datepicker__day">15</div>
<div class="chi-datepicker__day">16</div>
<div class="chi-datepicker__day">17</div>
<div class="chi-datepicker__day">18</div>
<div class="chi-datepicker__day">19</div>
<div class="chi-datepicker__day">20</div>
<div class="chi-datepicker__day">21</div>
<div class="chi-datepicker__day">22</div>
<div class="chi-datepicker__day">23</div>
<div class="chi-datepicker__day">24</div>
<div class="chi-datepicker__day">25</div>
<div class="chi-datepicker__day">26</div>
<div class="chi-datepicker__day">27</div>
<div class="chi-datepicker__day">28</div>
<div class="chi-datepicker__day">29</div>
<div class="chi-datepicker__day">30</div>
</div>
</div>
Active
<chi-date value="05/15/2019"></chi-date>
This HTML Blueprint requires JavaScript.
You may use your own solution, or use Chi's vanilla JavaScript solution,
Chi.js.
Use class
Use class
-active
for the selected date<div class="chi-datepicker -week-starts-on-sun -month-starts-on-wed">
<div class="chi-datepicker__month-row">
<div class="prev"><i class="chi-icon icon-chevron-left -sm" aria-hidden="true"></i></div>
<div class="chi-datepicker__month">May 2019</div>
<div class="next"><i class="chi-icon icon-chevron-right -sm" aria-hidden="true"></i></div>
</div>
<div class="chi-datepicker__day-names">
<div class="chi-datepicker__week-day">S</div>
<div class="chi-datepicker__week-day">M</div>
<div class="chi-datepicker__week-day">T</div>
<div class="chi-datepicker__week-day">W</div>
<div class="chi-datepicker__week-day">T</div>
<div class="chi-datepicker__week-day">F</div>
<div class="chi-datepicker__week-day">S</div>
</div>
<div class="chi-datepicker__days">
<div class="chi-datepicker__day">1</div>
<div class="chi-datepicker__day">2</div>
<div class="chi-datepicker__day">3</div>
<div class="chi-datepicker__day">4</div>
<div class="chi-datepicker__day">5</div>
<div class="chi-datepicker__day">6</div>
<div class="chi-datepicker__day">7</div>
<div class="chi-datepicker__day">8</div>
<div class="chi-datepicker__day">9</div>
<div class="chi-datepicker__day">10</div>
<div class="chi-datepicker__day">11</div>
<div class="chi-datepicker__day">12</div>
<div class="chi-datepicker__day">13</div>
<div class="chi-datepicker__day">14</div>
<div class="chi-datepicker__day -active">15</div>
<div class="chi-datepicker__day">16</div>
<div class="chi-datepicker__day">17</div>
<div class="chi-datepicker__day">18</div>
<div class="chi-datepicker__day">19</div>
<div class="chi-datepicker__day">20</div>
<div class="chi-datepicker__day">21</div>
<div class="chi-datepicker__day">22</div>
<div class="chi-datepicker__day">23</div>
<div class="chi-datepicker__day">24</div>
<div class="chi-datepicker__day">25</div>
<div class="chi-datepicker__day">26</div>
<div class="chi-datepicker__day">27</div>
<div class="chi-datepicker__day">28</div>
<div class="chi-datepicker__day">29</div>
<div class="chi-datepicker__day">30</div>
<div class="chi-datepicker__day">31</div>
</div>
</div>
Multiple active dates
Specify multiple active dates by separating the dates with a comma
<chi-date value="03/10/2021,03/11/2021,03/12/2021" multiple></chi-date>
Use class
-active
for the selected date<div class="chi-datepicker -week-starts-on-sun -month-starts-on-wed">
<div class="chi-datepicker__month-row">
<div class="prev"><i class="chi-icon icon-chevron-left -sm" aria-hidden="true"></i></div>
<div class="chi-datepicker__month">March 2021</div>
<div class="next"><i class="chi-icon icon-chevron-right -sm" aria-hidden="true"></i></div>
</div>
<div class="chi-datepicker__day-names">
<div class="chi-datepicker__week-day">S</div>
<div class="chi-datepicker__week-day">M</div>
<div class="chi-datepicker__week-day">T</div>
<div class="chi-datepicker__week-day">W</div>
<div class="chi-datepicker__week-day">T</div>
<div class="chi-datepicker__week-day">F</div>
<div class="chi-datepicker__week-day">S</div>
</div>
<div class="chi-datepicker__days">
<div class="chi-datepicker__day">1</div>
<div class="chi-datepicker__day">2</div>
<div class="chi-datepicker__day">3</div>
<div class="chi-datepicker__day">4</div>
<div class="chi-datepicker__day">5</div>
<div class="chi-datepicker__day">6</div>
<div class="chi-datepicker__day">7</div>
<div class="chi-datepicker__day">8</div>
<div class="chi-datepicker__day">9</div>
<div class="chi-datepicker__day -active">10</div>
<div class="chi-datepicker__day -active">11</div>
<div class="chi-datepicker__day -active">12</div>
<div class="chi-datepicker__day">13</div>
<div class="chi-datepicker__day">14</div>
<div class="chi-datepicker__day">15</div>
<div class="chi-datepicker__day">16</div>
<div class="chi-datepicker__day">17</div>
<div class="chi-datepicker__day">18</div>
<div class="chi-datepicker__day">19</div>
<div class="chi-datepicker__day">20</div>
<div class="chi-datepicker__day">21</div>
<div class="chi-datepicker__day">22</div>
<div class="chi-datepicker__day">23</div>
<div class="chi-datepicker__day">24</div>
<div class="chi-datepicker__day">25</div>
<div class="chi-datepicker__day">26</div>
<div class="chi-datepicker__day">27</div>
<div class="chi-datepicker__day">28</div>
<div class="chi-datepicker__day">29</div>
<div class="chi-datepicker__day">30</div>
<div class="chi-datepicker__day">31</div>
</div>
</div>
Min and Max
<chi-date min="06/06/2019" max="06/22/2019"></chi-date>
This HTML Blueprint requires JavaScript.
You may use your own solution, or use Chi's vanilla JavaScript solution,
Chi.js.
Use class
Use class
-inactive
for deactivated dates.<div class="chi-datepicker -week-starts-on-sun -month-starts-on-sat">
<div class="chi-datepicker__month-row">
<div class="prev -disabled"><i class="chi-icon icon-chevron-left -sm" aria-hidden="true"></i></div>
<div class="chi-datepicker__month">June 2019</div>
<div class="next -disabled"><i class="chi-icon icon-chevron-right -sm" aria-hidden="true"></i></div>
</div>
<div class="chi-datepicker__day-names">
<div class="chi-datepicker__week-day">S</div>
<div class="chi-datepicker__week-day">M</div>
<div class="chi-datepicker__week-day">T</div>
<div class="chi-datepicker__week-day">W</div>
<div class="chi-datepicker__week-day">T</div>
<div class="chi-datepicker__week-day">F</div>
<div class="chi-datepicker__week-day">S</div>
</div>
<div class="chi-datepicker__days">
<div class="chi-datepicker__day -inactive">1</div>
<div class="chi-datepicker__day -inactive">2</div>
<div class="chi-datepicker__day -inactive">3</div>
<div class="chi-datepicker__day -inactive">4</div>
<div class="chi-datepicker__day -inactive">5</div>
<div class="chi-datepicker__day">6</div>
<div class="chi-datepicker__day">7</div>
<div class="chi-datepicker__day">8</div>
<div class="chi-datepicker__day">9</div>
<div class="chi-datepicker__day">10</div>
<div class="chi-datepicker__day">11</div>
<div class="chi-datepicker__day">12</div>
<div class="chi-datepicker__day">13</div>
<div class="chi-datepicker__day">14</div>
<div class="chi-datepicker__day">15</div>
<div class="chi-datepicker__day">16</div>
<div class="chi-datepicker__day">17</div>
<div class="chi-datepicker__day">18</div>
<div class="chi-datepicker__day">19</div>
<div class="chi-datepicker__day">20</div>
<div class="chi-datepicker__day">21</div>
<div class="chi-datepicker__day">22</div>
<div class="chi-datepicker__day -inactive">23</div>
<div class="chi-datepicker__day -inactive">24</div>
<div class="chi-datepicker__day -inactive">25</div>
<div class="chi-datepicker__day -inactive">26</div>
<div class="chi-datepicker__day -inactive">27</div>
<div class="chi-datepicker__day -inactive">28</div>
<div class="chi-datepicker__day -inactive">29</div>
<div class="chi-datepicker__day -inactive">30</div>
</div>
</div>
Date and Time
November 2018
S
M
T
W
T
F
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
12
01
02
03
04
05
06
07
08
09
10
11
00
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
AM
PM
<chi-date></chi-date>
<chi-time></chi-time>
chi-date-picker
Properties
Methods
chi-date
Properties
Events
Methods
JavaScript
This component accepts options to configure its behavior.