Date picker
Examples
Base
<chi-label for="date">Date</chi-label>
<chi-date-picker id="date"></chi-date-picker>
<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>
<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/2024" min="01/14/2024" max="02/07/2024">
<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/2024" min="01/14/2024" max="02/07/2024" 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/2024',
min: '01/24/2024'
}
);
</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="01/24/2024, 03/25/2024"
attribute
Separate dates with a comma
<chi-label for="date-excluded-dates">Date</chi-label>
<chi-date-picker id="date-excluded-dates" value="01/05/2024" excluded-dates="01/24/2024, 03/25/2024, 07/03/2024, 09/12/2024, 12/12/2024"></chi-date-picker>
Excluded dates and week days
Disable dates - excluded-dates="02/23/2024, 05/24/2024"
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="02/23/2024, 05/24/2024, 07/03/2024, 09/12/2024, 12/12/2024"></chi-date-picker>
Error
Use the danger
state to provide feedback to users when date fails to validate.
To meet accessibility requirements, danger date picker must include an error message explaining the
failure and/or how to correct it.
<chi-label for="date-error">Date</chi-label>
<chi-date-picker id="date-error" state="danger"></chi-date-picker>
<div class="chi-label -status -danger">
<chi-icon icon="circle-warning"></chi-icon>
Please select a date.
</div>
<div class="chi-form__item">
<label class="chi-label" for="datepicker-error">Date</label>
<div class="chi-input__wrapper -icon--right">
<input id="datepicker-error" type="text" class="chi-input -danger" placeholder="MM/DD/YYYY">
<i class="chi-icon icon-date" aria-hidden="true"></i>
</div>
<div class="chi-label -status -danger">
<i class="chi-icon circle-warning" aria-hidden="true"></i>
Please select a date.
</div>
</div>
<script>chi.datePicker(document.getElementById('datepicker-error'));</script>
Date Time
Minutes can be shown in steps of 5, 10, 15, 20, or 30 minutes.
Use the property minutes-step
to define the step for the minutes (defaults to 15 min if no value is provided).
<chi-label for="date-time">Date</chi-label>
<chi-date-picker id="date-time" mode="datetime"></chi-date-picker>
Date Time stepped
Minutes can be shown in steps of 5, 10, 15, 20, or 30 minutes or seconds.
Use the property minutes-step="value"
to define the step for the
minutes (defaults to 15 min) if no value is provided.
<chi-label for="date-time">Date</chi-label>
<chi-date-picker id="date-time" mode="datetime" minutes-step="5"></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>
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 2024
</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/2024"></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">May 2024</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
<chi-date value="03/10/2024,03/11/2024,03/12/2024" multiple></chi-date>
-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 2024</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/2024" max="06/22/2024"></chi-date>
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 2024</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
<chi-date></chi-date>
<chi-time></chi-time>
chi-date-picker
Properties
Events
Methods
chi-date
Properties
Events
Methods
JavaScript
This component accepts options to configure its behavior.