Date Pickers
Purpose
Date pickers enable a customer to select a single date or a date range, such as a payment date or a statement period requiring start and end dates. Date pickers are used to display past, present, or future dates. Use date pickers when you are asking the user for a date, a date range, or for scheduling tasks.
See text inputs for input field design specifications and date input.
Date Picker
Usage
Use a date picker to select a single date, such as a payment date. Date pickers can be used to display past, present, or future dates. Dates can be inputted by typing or using the calendar.
Date picker requires a day, month, and year. The placeholder can be localized.
Example - Default
Please enter month, day, and year, separated by a /
<div id="defaultDP" class="date-picker" role="application">
<label id="dp-label-default" for="defaultDPLabel" class="label-3">Payment date</label>
<div class="form-control icon-hover">
<span id="default-format" class="sr-only">Please enter month, day, and year, separated by a /</span>
<input id="defaultDPLabel" class="form-control" type="text" placeholder="MM/DD/YYYY" aria-describedby="default-format">
<button id="toggleCalendar" class="btn-form" aria-describedby="dp-label-default" aria-expanded="false" onclick="toggleDP()">
<i class="flex flex-justify-center flex-align-items-center" data-dls-icon-size="sm" data-dls-icon="calendar" title="Calendar icon"></i>
</button>
</div>
<div class="calendar border hidden">
<div class="calendar-navigation">
<button class="glyph glyph-lg" aria-label="Previous Month" disabled>
<i data-dls-glyph="left" data-dls-glyph-size="lg" data-dls-icon-role="decorative"></i>
</button>
<button class="dls-bright-blue glyph glyph-lg" aria-label="Next Month">
<i data-dls-glyph="right" data-dls-glyph-size="lg" data-dls-icon-role="decorative"></i>
</button>
</div>
<table class="table" role="grid">
<caption class="heading-3 dls-gray-06">August 2022</caption>
<thead>
<tr>
<th><abbr aria-label="Sunday">S</abbr></th>
<th><abbr aria-label="Monday">M</abbr></th>
<th><abbr aria-label="Tuesday">T</abbr></th>
<th><abbr aria-label="Wednesday">W</abbr></th>
<th><abbr aria-label="Thursday">T</abbr></th>
<th><abbr aria-label="Friday">F</abbr></th>
<th><abbr aria-label="Saturday">S</abbr></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td><button disabled aria-describedby="dp-label-default" aria-label="Wednesday, August 1, 2022">1</button></td>
<td><button disabled aria-describedby="dp-label-default" aria-label="Thursday, August 2, 2022">2</button></td>
<td><button disabled aria-describedby="dp-label-default" aria-label="Friday, August 3, 2022">3</button></td>
<td><button disabled aria-describedby="dp-label-default" aria-label="Saturday, August 4, 2022">4</button></td>
</tr>
<tr>
<td><button disabled aria-describedby="dp-label-default" aria-label="Sunday, August 5, 2022">5</button></td>
<td><button disabled aria-describedby="dp-label-default" aria-label="Monday, August 6, 2022">6</button></td>
<td><button aria-describedby="dp-label-default" aria-label="Tuesday, August 7, 2022">7</button></td>
<td><button aria-describedby="dp-label-default" aria-label="Wednesday, August 8, 2022">8</button></td>
<td><button class="current" aria-describedby="dp-label-default" aria-label="Thursday, August 9, 2022">9</button></td>
<td><button aria-describedby="dp-label-default" aria-label="Friday, August 10, 2022">10</button></td>
<td><button aria-describedby="dp-label-default" aria-label="Saturday, August 11, 2022">11</button></td>
</tr>
<tr>
<td><button aria-describedby="dp-label-default" aria-label="Sunday, August 12, 2022">12</button></td>
<td><button aria-describedby="dp-label-default" aria-label="Monday, August 13, 2022">13</button></td>
<td><button aria-describedby="dp-label-default" aria-label="Tuesday, August 14, 2022">14</button></td>
<td><button aria-describedby="dp-label-default" aria-label="Wednesday, August 15, 2022">15</button></td>
<td><button aria-describedby="dp-label-default" aria-label="Thursday, August 16, 2022">16</button></td>
<td><button aria-describedby="dp-label-default" aria-label="Friday, August 17, 2022">17</button></td>
<td><button aria-describedby="dp-label-default" aria-label="Saturday, August 18, 2022">18</button></td>
</tr>
<tr>
<td><button aria-describedby="dp-label-default" aria-label="Sunday, August 19, 2022">19</button></td>
<td><button aria-describedby="dp-label-default" aria-label="Monday, August 20, 2022">20</button></td>
<td><button aria-describedby="dp-label-default" aria-label="Tuesday, August 21, 2022">21</button></td>
<td><button class="due-date-outline" aria-describedby="dp-label-default" aria-label="Wednesday, August 22, 2022">22</button></td>
<td><button aria-describedby="dp-label-default" aria-label="Thursday, August 23, 2022">23</button></td>
<td><button aria-describedby="dp-label-default" aria-label="Friday, August 24, 2022">24</button></td>
<td><button aria-describedby="dp-label-default" aria-label="Saturday, August 25, 2022">25</button></td>
</tr>
<tr>
<td><button aria-describedby="dp-label-default" aria-label="Sunday, August 26, 2022">26</button></td>
<td><button aria-describedby="dp-label-default" aria-label="Monday, August 27, 2022">27</button></td>
<td><button aria-describedby="dp-label-default" aria-label="Tuesday, August 28, 2022">28</button></td>
<td><button aria-describedby="dp-label-default" aria-label="Wednesday, August 29, 2022">29</button></td>
<td><button aria-describedby="dp-label-default" aria-label="Thursday, August 30, 2022">30</button></td>
<td><button aria-describedby="dp-label-default" aria-label="Thursday, August 31, 2022">31</button></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<div class="calendar-footer bordered">
<div>
Your payment due date is <strong class="dls-deep-blue">Aug 21</strong>
</div>
</div>
</div>
</div>
<!-- example script -->
<script>
var calendar = document.querySelector('#defaultDP .calendar');
var calenderToggleButton = document.querySelector('#defaultDP #toggleCalendar');
var calenderIcon = document.querySelector('#defaultDP i[data-dls-icon="calendar"]');
function toggleDP () {
if (calendar.classList.contains("hidden")) {
calendar.classList.remove("hidden");
calenderToggleButton.setAttribute("aria-expanded", "true");
calenderToggleButton.setAttribute("aria-label", "Close calendar");
calenderIcon.setAttribute("data-dls-icon-variant", "filled");
} else {
calendar.classList.add("hidden");
calenderToggleButton.setAttribute("aria-expanded", "false");
calenderToggleButton.setAttribute("aria-label", "Open calendar");
calenderIcon.removeAttribute("data-dls-icon-variant");
}
}
</script>Example - Calendar Payment Date
Please enter month, day, and year, separated by a /
| S | M | T | W | T | F | S |
|---|---|---|---|---|---|---|
<div class="date-picker" role="application">
<label id="dp-label-open" for="dp" class="label-3">Payment date</label>
<div class="form-control icon-hover">
<span id="dp-format" class="sr-only">Please enter month, day, and year, separated by a /</span>
<input id="dp" class="form-control" type="text" placeholder="MM/DD/YYYY" value="" aria-describedby="dp-format">
<button class="btn-form flex flex-justify-center flex-align-items-center" aria-label="date picker calendar">
<i data-dls-icon-size="sm" data-dls-icon-variant="filled" data-dls-icon="calendar" title="Calendar icon"></i>
</button>
</div>
<div class="calendar border">
<div class="calendar-navigation">
<button class="glyph glyph-lg" aria-label="Previous Month" disabled>
<i data-dls-glyph="left" data-dls-glyph-size="lg" data-dls-icon-role="decorative"></i>
</button>
<button class="dls-bright-blue glyph glyph-lg" aria-label="Next Month">
<i data-dls-glyph="right" data-dls-glyph-size="lg" data-dls-icon-role="decorative"></i>
</button>
</div>
<table class="table" role="grid">
<caption class="heading-3 dls-gray-06">August 2022</caption>
<thead>
<tr>
<th><abbr aria-label="Sunday">S</abbr></th>
<th><abbr aria-label="Monday">M</abbr></th>
<th><abbr aria-label="Tuesday">T</abbr></th>
<th><abbr aria-label="Wednesday">W</abbr></th>
<th><abbr aria-label="Thursday">T</abbr></th>
<th><abbr aria-label="Friday">F</abbr></th>
<th><abbr aria-label="Saturday">S</abbr></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td><button disabled aria-describedby="dp-label-open" aria-label="Monday, August 1, 2022">1</button></td>
<td><button disabled aria-describedby="dp-label-open" aria-label="Tuesday, August 2, 2022">2</button></td>
<td><button disabled aria-describedby="dp-label-open" aria-label="Wednesday, August 3, 2022">3</button></td>
<td><button disabled aria-describedby="dp-label-open" aria-label="Thursday, August 4, 2022">4</button></td>
<td><button disabled aria-describedby="dp-label-open" aria-label="Friday, August 5, 2022">5</button></td>
<td><button disabled aria-describedby="dp-label-open" aria-label="Saturday, August 6, 2022">6</button></td>
</tr>
<tr>
<td><button aria-describedby="dp-label-open" aria-label="Sunday, August 7, 2022">7</button></td>
<td><button aria-describedby="dp-label-open" aria-label="Monday, August 8, 2022">8</button></td>
<td><button class="current" aria-describedby="dp-label-open" aria-label="Tuesday, August 9, 2022">9</button></td>
<td><button aria-describedby="dp-label-open" aria-label="Wednesday, August 10, 2022">10</button></td>
<td><button aria-describedby="dp-label-open" aria-label="Thursday, August 11, 2022">11</button></td>
<td><button aria-describedby="dp-label-open" aria-label="Friday, August 12, 2022">12</button></td>
<td><button aria-describedby="dp-label-open" aria-label="Saturday, August 13, 2022">13</button></td>
</tr>
<tr>
<td><button aria-describedby="dp-label-open" aria-label="Sunday, August 14, 2022">14</button></td>
<td><button aria-describedby="dp-label-open" aria-label="Monday, August 15, 2022">15</button></td>
<td><button aria-describedby="dp-label-open" aria-label="Tuesday, August 16, 2022">16</button></td>
<td><button aria-describedby="dp-label-open" aria-label="Wednesday, August 17, 2022">17</button></td>
<td><button aria-describedby="dp-label-open" aria-label="Thursday, August 18, 2022">18</button></td>
<td><button aria-describedby="dp-label-open" aria-label="Friday, August 19, 2022">19</button></td>
<td><button aria-describedby="dp-label-open" aria-label="Saturday, August 20, 2022">20</button></td>
</tr>
<tr>
<td><button aria-describedby="dp-label-open" aria-label="Sunday, August 21, 2022">21</button></td>
<td><button class="due-date-outline" aria-describedby="dp-label-open" aria-label="Monday, August 22, 2022">22</button></td>
<td><button aria-describedby="dp-label-open" aria-label="Tuesday, August 23, 2022">23</button></td>
<td><button aria-describedby="dp-label-open" aria-label="Wednesday, August 24, 2022">24</button></td>
<td><button aria-describedby="dp-label-open" aria-label="Thursday, August 25, 2022">25</button></td>
<td><button aria-describedby="dp-label-open" aria-label="Friday, August 26, 2022">26</button></td>
<td><button aria-describedby="dp-label-open" aria-label="Saturday, August 27, 2022">27</button></td>
</tr>
<tr>
<td><button aria-describedby="dp-label-open" aria-label="Sunday, August 28, 2022">28</button></td>
<td><button aria-describedby="dp-label-open" aria-label="Monday, August 29, 2022">29</button></td>
<td><button aria-describedby="dp-label-open" aria-label="Tuesday, August 30, 2022">30</button></td>
<td><button aria-describedby="dp-label-open" aria-label="Wednesday, August 31, 2022">31</button></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<div class="calendar-footer bordered">
<div>
Your payment due date is <strong class="dls-deep-blue">Aug 22</strong>
</div>
</div>
</div>
</div>Specs - Default
Label Font = Label 3, Gray 06
Entry Font = Body 3, Gray 04 (placeholder), Gray 06 (default), Status - Warning (error)
Fill = Gray 01
Input Field Border = Gray 03 (default), Bright Blue (active), Status - Warning (error)
Icon = Calendar (small), Bright Blue (default), Status - Warning (error)
Specs - Calendar Payment Date
Glyphs = Arrow (large), Bright Blue (default), Gray 03 (inactive)
Month Heading = Heading 3, Gray 06
Day Heading = Label 3, Gray 06
Messaging Text = Body 1 (message), Gray 06, Body 2 (date), Deep Blue
Specs - Date
Error
Font = Body 1, Status - Warning
Fill = Status - Warning, 10% opacity
Class Name = .error
Attribute = aria-invalid="true"
Date Range Picker
Usage
Use a date range picker to select a range, such as holiday dates. Date range pickers can be used to display past, present, or future dates. Dates can be inputted by typing or using the calendar. Note that date range picker requires a day, month, and year, and the placeholder can be localized.
The date range picker uses an input mask to let users focus on the first and second date separately.
For accessibility, label the date range picker with a name that explains the purpose of both dates e.g. ’From Date - To Date’ or ‘Arrival Date and Departure Date’.
Example - Date Range
-
Please enter month, day, and year, separated by a /
-
| S | M | T | W | T | F | S |
|---|---|---|---|---|---|---|
<div class="date-picker" role="application">
<label id="dp-label-depart" for="depart" class="label-3">Departure Date</label>
<span class="label-3">-</span>
<label id="dp-label-return" for="return" class="label-3">Return Date</label>
<div class="form-control icon-hover range">
<span id="dprange-format" class="sr-only">Please enter month, day, and year, separated by a /</span>
<input id="depart" class="form-control date-start" type="text" placeholder="MM/DD/YYYY" value="08/17/2022" aria-describedby="dprange-format">
<span>-</span>
<input id="return" class="form-control date-end" type="text" placeholder="MM/DD/YYYY" value="08/26/2022" aria-describedby="dprange-format">
<button class="btn-form flex flex-justify-center flex-align-items-center" aria-label="Open/close calendar">
<i data-dls-icon-size="sm" data-dls-icon="calendar" title="Calendar icon"></i>
</button>
<div class="date-range-focus"></div>
</div>
<div class="calendar range border">
<div class="calendar-navigation">
<button class="glyph glyph-lg" aria-label="Previous Month" disabled>
<i data-dls-glyph="left" data-dls-glyph-size="lg" data-dls-icon-role="decorative"></i>
</button>
<button class="dls-bright-blue glyph glyph-lg" aria-label="Next Month">
<i data-dls-glyph="right" data-dls-glyph-size="lg" data-dls-icon-role="decorative"></i>
</button>
</div>
<table class="table" role="grid">
<caption class="heading-3 dls-gray-06">August 2022</caption>
<thead>
<tr>
<th><abbr aria-label="Sunday">S</abbr></th>
<th><abbr aria-label="Monday">M</abbr></th>
<th><abbr aria-label="Tuesday">T</abbr></th>
<th><abbr aria-label="Wednesday">W</abbr></th>
<th><abbr aria-label="Thursday">T</abbr></th>
<th><abbr aria-label="Friday">F</abbr></th>
<th><abbr aria-label="Saturday">S</abbr></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td><button disabled aria-describedby="dp-label-depart" aria-label="Monday, August 1, 2022">1</button></td>
<td><button disabled aria-describedby="dp-label-depart" aria-label="Tuesday, August 2, 2022">2</button></td>
<td><button disabled aria-describedby="dp-label-depart" aria-label="Wednesday, August 3, 2022">3</button></td>
<td><button disabled aria-describedby="dp-label-depart" aria-label="Thursday, August 4, 2022">4</button></td>
<td><button disabled aria-describedby="dp-label-depart" aria-label="Friday, August 5, 2022">5</button></td>
<td><button disabled aria-describedby="dp-label-depart" aria-label="Saturday, August 6, 2022">6</button></td>
</tr>
<tr>
<td><button aria-describedby="dp-label-depart" aria-label="Sunday, August 7, 2022">7</button></td>
<td><button aria-describedby="dp-label-depart" aria-label="Monday, August 8, 2022">8</button></td>
<td><button aria-describedby="dp-label-depart" aria-label="Tuesday, August 9, 2022">9</button></td>
<td><button aria-describedby="dp-label-depart" aria-label="Wednesday, August 10, 2022">10</button></td>
<td><button aria-describedby="dp-label-depart" aria-label="Thursday, August 11, 2022">11</button></td>
<td><button aria-describedby="dp-label-depart" aria-label="Friday, August 12, 2022">12</button></td>
<td><button aria-describedby="dp-label-depart" aria-label="Saturday, August 13, 2022">13</button></td>
</tr>
<tr>
<td><button aria-describedby="dp-label-depart" aria-label="Sunday, August 14, 2022">14</button></td>
<td><button aria-describedby="dp-label-depart" aria-label="Monday, August 15, 2022">15</button></td>
<td><button aria-describedby="dp-label-depart" aria-label="Tuesday, August 16, 2022">16</button></td>
<td aria-selected="true"><button aria-describedby="dp-label-depart" aria-label="Wednesday, August 17, 2022">17</button></td>
<td><button class="range" aria-describedby="dp-label-depart" aria-label="Thursday, August 18, 2022">18</button></td>
<td><button class="range" aria-describedby="dp-label-depart" aria-label="Friday, August 19, 2022">19</button></td>
<td><button class="range" aria-describedby="dp-label-depart" aria-label="Saturday, August 20, 2022">20</button></td>
</tr>
<tr>
<td><button class="range" aria-describedby="dp-label-depart" aria-label="Sunday, August 21, 2022">21</button></td>
<td><button class="range" aria-describedby="dp-label-depart" aria-label="Monday, August 22, 2022">22</button></td>
<td><button class="range" aria-describedby="dp-label-depart" aria-label="Tuesday, August 23, 2022">23</button></td>
<td><button class="range" aria-describedby="dp-label-depart" aria-label="Wednesday, August 24, 2022">24</button></td>
<td><button class="range" aria-describedby="dp-label-depart" aria-label="Thursday, August 25, 2022">25</button></td>
<td aria-selected="true"><button aria-describedby="dp-label-return" aria-label="Friday, August 26, 2022">26</button></td>
<td><button aria-describedby="dp-label-depart" aria-label="Saturday, August 27, 2022">27</button></td>
</tr>
<tr>
<td><button aria-describedby="dp-label-depart" aria-label="Sunday, August 28, 2022">28</button></td>
<td><button aria-describedby="dp-label-depart" aria-label="Monday, August 29, 2022">29</button></td>
<td><button aria-describedby="dp-label-depart" aria-label="Tuesday, August 30, 2022">30</button></td>
<td><button aria-describedby="dp-label-depart" aria-label="Wednesday, August 31, 2022">31</button></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>Date States
Usage
Our Date Pickers have five date states, Default, Selected, Range, Error, and Disabled. We also have indicators for Due date and Current date.
Example - Date States
| Due Date | Current Date | Current & Due Date | ||
|---|---|---|---|---|
| Default | ||||
| Selected | ||||
| Range | ||||
| Disabled | ||||
| Error |
Example - Calendar Payment Date Error
When using the Error state, explain the reason for the error with a error message. Use aria-live region to announce errors that occur without a form submit.
-
Please enter month, day, and year, separated by a /
-
Return Date is required
| S | M | T | W | T | F | S |
|---|---|---|---|---|---|---|
<div class="date-picker" role="application">
<label id="dp-label-error-depart" for="depart-error" class="label-3">Departure Date</label>
<span class="label-3">-</span>
<label id="dp-label-error-return" for="return-error" class="label-3">Return Date</label>
<div class="form-control has-warning icon-hover range">
<span id="dprange-format" class="sr-only">Please enter month, day, and year, separated by a /</span>
<input id="depart-error" class="form-control date-start" type="text" placeholder="MM/DD/YYYY" value="08/17/2022" aria-describedby="dprange-format">
<span>-</span>
<input id="return-error" class="form-control date-end" type="text" placeholder="MM/DD/YYYY" aria-describedby="dprange-format">
<button class="btn-form flex flex-justify-center flex-align-items-center" aria-label="Close calendar">
<i class="dls-color-warning" data-dls-icon-size="sm" data-dls-icon-variant="filled" data-dls-icon="calendar" title="Calendar icon"></i>
</button>
<div class="date-range-focus"></div>
</div>
<div class="calendar border">
<div class="calendar-header">
<div class="dls-color-warning">
<i class="dls-color-warning pad-1-r" data-dls-icon-size="sm" data-dls-icon-variant="filled" data-dls-icon="warning" title="Warning icon"></i>
<span>Return Date is required</span>
</div>
</div>
<div class="calendar-navigation">
<button class="glyph glyph-lg" aria-label="Previous Month" disabled>
<i data-dls-glyph="left" data-dls-glyph-size="lg" data-dls-icon-role="decorative"></i>
</button>
<button class="dls-bright-blue glyph glyph-lg" aria-label="Next Month">
<i data-dls-glyph="right" data-dls-glyph-size="lg" data-dls-icon-role="decorative"></i>
</button>
</div>
<table class="table" role="grid">
<caption class="heading-3 dls-gray-06">August 2022</caption>
<thead>
<tr>
<th><abbr aria-label="Sunday">S</abbr></th>
<th><abbr aria-label="Monday">M</abbr></th>
<th><abbr aria-label="Tuesday">T</abbr></th>
<th><abbr aria-label="Wednesday">W</abbr></th>
<th><abbr aria-label="Thursday">T</abbr></th>
<th><abbr aria-label="Friday">F</abbr></th>
<th><abbr aria-label="Saturday">S</abbr></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td><button disabled aria-label="Monday, August 1, 2022">1</button></td>
<td><button disabled aria-label="Tuesday, August 2, 2022">2</button></td>
<td><button disabled aria-label="Wednesday, August 3, 2022">3</button></td>
<td><button disabled aria-label="Thursday, August 4, 2022">4</button></td>
<td><button disabled aria-label="Friday, August 5, 2022">5</button></td>
<td><button disabled aria-label="Saturday, August 6, 2022">6</button></td>
</tr>
<tr>
<td><button aria-label="Sunday, August 7, 2022">7</button></td>
<td><button aria-label="Monday, August 8, 2022">8</button></td>
<td><button aria-label="Tuesday, August 9, 2022">9</button></td>
<td><button aria-label="Wednesday, August 10, 2022">10</button></td>
<td><button aria-label="Thursday, August 11, 2022">11</button></td>
<td><button aria-label="Friday, August 12, 2022">12</button></td>
<td><button aria-label="Saturday, August 13, 2022">13</button></td>
</tr>
<tr>
<td><button aria-label="Sunday, August 14, 2022">14</button></td>
<td><button aria-label="Monday, August 15, 2022">15</button></td>
<td><button aria-label="Tuesday, August 16, 2022">16</button></td>
<td aria-selected="true"><button aria-describedby="dp-label-error-depart" aria-label="Wednesday, August 17, 2022">17</button></td>
<td><button aria-label="Thursday, August 18, 2022">18</button></td>
<td><button aria-label="Friday, August 19, 2022">19</button></td>
<td><button aria-label="Saturday, August 20, 2022">20</button></td>
</tr>
<tr>
<td><button aria-label="Sunday, August 21, 2022">21</button></td>
<td><button aria-label="Monday, August 22, 2022">22</button></td>
<td><button aria-label="Tuesday, August 23, 2022">23</button></td>
<td><button aria-label="Wednesday, August 24, 2022">24</button></td>
<td><button aria-label="Thursday, August 25, 2022">25</button></td>
<td><button aria-label="Friday, August 26, 2022">26</button></td>
<td><button aria-label="Saturday, August 27, 2022">27</button></td>
</tr>
<tr>
<td><button aria-label="Sunday, August 28, 2022">28</button></td>
<td><button aria-label="Monday, August 29, 2022">29</button></td>
<td><button aria-label="Tuesday, August 30, 2022">30</button></td>
<td><button aria-label="Wednesday, August 31, 2022">31</button></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>