Date picker

Date picker allows users to enter a date through text input or choose a date from a calendar.

Examples

Base

Date
<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 -icon--muted"></i>
  </div>
</div>

<script>chi.datePicker(document.getElementById('datepicker-1'));</script>

Disabled

Date
<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 -icon--muted"></i>
  </div>
</div>

<script>chi.datePicker(document.getElementById('datepicker-2'));</script>

Value, min and max options

Date
<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 -icon--muted"></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

Date
<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

Date
<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"

Date
<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

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 -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"></i>
    </div>
    <div class="chi-datepicker__month">
      November 2018
    </div>
    <div class="next">
      <i class="chi-icon icon-chevron-right -sm"></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 -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"></i></div>
    <div class="chi-datepicker__month">May 2019</div>
    <div class="next"><i class="chi-icon icon-chevron-right -sm"></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"></i></div>
    <div class="chi-datepicker__month">March 2021</div>
    <div class="next"><i class="chi-icon icon-chevron-right -sm"></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 -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"></i></div>
    <div class="chi-datepicker__month">June 2019</div>
    <div class="next -disabled"><i class="chi-icon icon-chevron-right -sm"></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

Property
Attribute
Description
Type
Default
active
active
Indicates whether the dropdown calendar is open or closed
boolean
false
disabled
disabled
to disable chi-date-picker.
boolean
false
excludedDates
excluded-dates
To specify which dates to disable
string
undefined
excludedWeekdays
excluded-weekdays
To specify which days of week to disable
string
undefined
format
format
Date format used in the attributes and how it will be shown to the user.
string
'MM/DD/YYYY'
locale
locale
Locale to use in date picker
"de" | "en" | "es" | "fr" | "ja" | "pt" | "zh"
'en'
max
max
Maximum eligible date
string
'12/31/2099'
min
min
Minimum eligible date
string
'01/01/1900'
mode
mode
To render Date Picker with Time Picker
string
'date'
multiple
multiple
To allow the user to select multiple dates
boolean
false
value
value
Selected date in the date picker
string
undefined

Methods

Method
Description
Returns
Parameters
getDate() => Promise<string>
Gets date

Type: Promise<string>

-
resetDate() => Promise<void>
Resets date

Type: Promise<void>

-
setDate(date: any) => Promise<void>
Sets date

Type: Promise<void>

-

chi-date

Properties

Property
Attribute
Description
Type
Default
excludedDates
excluded-dates
To specify which dates to disable
string
undefined
excludedWeekdays
excluded-weekdays
To specify which days of week to disable
string
undefined
format
format
Date format used in the attributes and how it will be shown to the user.
string
'MM/DD/YYYY'
locale
locale
Locale to use in date picker
"de" | "en" | "es" | "fr" | "ja" | "pt" | "zh"
'en'
max
max
Maximum eligible date
string
'12/31/2099'
min
min
Minimum eligible date
string
'01/01/1900'
multiple
multiple
To allow the user to select multiple dates
boolean
false
value
value
Selected date in the date picker
string
undefined

Events

Event
Description
Type
chiDateChange
Date change value event
CustomEvent<any>

Methods

Method
Description
Returns
Parameters
getDate() => Promise<string>
Gets date

Type: Promise<string>

-
setDate(date: any) => Promise<void>
Sets date

Type: Promise<void>

-

JavaScript

This component accepts options to configure its behavior.

Option
Default
Description
date
null
Sets the initial date into the date picker. Overrides the value of the input.
locale
'en'
Sets the locale for names of months and days of the week. The locales supported are the ones supported by Day.js. Locales must be imported before using them. List of supported locales.
min
'01/01/1900'
Prevent user pick a date before the configured.
max
'12/31/2100'
Prevent user pick a date after the configured.
format
'MM/DD/YYYY'
Format of the date used in the input.

Accessibility

Accessibility guidelines coming soon