The Date picker pattern lets a user type in a date or select it using a calendar.
Example
Enter the date using the dd/mm/yyyy format. For example, 31/01/2024.
February 2020
| Mo | Tu | We | Th | Fr | Sa | Su |
|---|---|---|---|---|---|---|
| 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 |
HTML
<div id="myDatepicker" class="datepicker">
<div class="date">
<label for="id-textbox-1">Move in date</label>
<p class="desc" id="id-description-1">Enter the date using the dd/mm/yyyy format. For example, 31/01/2024.</p>
<div class="group">
<input type="text" placeholder="dd/mm/yyyy" id="id-textbox-1" aria-describedby="id-description-1">
<button type="button" class="icon" aria-label="Choose Date">
<svg width="25" height="27" viewBox="0 0 25 27" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M22.1 2.9H20.9V0.5H18.5V2.9H6.5V0.5H4.1V2.9H2.9C1.58 2.9 0.5 3.98 0.5 5.3V24.5C0.5 25.82 1.58 26.9 2.9 26.9H22.1C23.42 26.9 24.5 25.82 24.5 24.5V5.3C24.5 3.98 23.42 2.9 22.1 2.9ZM22.1 24.5H2.9V8.9H22.1V24.5Z" fill="white"/>
</svg>
</button>
</div>
</div>
<div id="id-datepicker-1" class="datepicker-dialog" role="dialog" aria-modal="true" aria-label="Choose Date">
<div class="header">
<button type="button" class="prev-year" aria-label="previous year"></button>
<button type="button" class="prev-month" aria-label="previous month"></button>
<h2 id="id-grid-label" class="month-year" aria-live="polite">February 2020</h2>
<button type="button" class="next-month" aria-label="next month">
<span class="fas fa-angle-right fa-lg"></span>
</button>
<button type="button" class="next-year" aria-label="next year">
<span class="fas fa-angle-double-right fa-lg"></span>
</button>
</div>
<div class="table-wrap"><table class="dates" role="grid" aria-labelledby="id-grid-label">
<thead>
<tr>
<th scope="col" abbr="Monday">Mo</th>
<th scope="col" abbr="Tuesday">Tu</th>
<th scope="col" abbr="Wednesday">We</th>
<th scope="col" abbr="Thursday">Th</th>
<th scope="col" abbr="Friday">Fr</th>
<th scope="col" abbr="Saturday">Sa</th>
<th scope="col" abbr="Sunday">Su</th>
</tr>
</thead>
<tbody>
<tr>
<td class="disabled" tabindex="-1"></td>
<td class="disabled" tabindex="-1"></td>
<td class="disabled" tabindex="-1"></td>
<td class="disabled" tabindex="-1"></td>
<td class="disabled" tabindex="-1"></td>
<td class="disabled" tabindex="-1"></td>
<td tabindex="-1" data-date="2020-02-01">1</td>
</tr>
<tr>
<td tabindex="-1" data-date="2020-02-02">2</td>
<td tabindex="-1" data-date="2020-02-03">3</td>
<td tabindex="-1" data-date="2020-02-04">4</td>
<td tabindex="-1" data-date="2020-02-05">5</td>
<td tabindex="-1" data-date="2020-02-06">6</td>
<td tabindex="-1" data-date="2020-02-07">7</td>
<td tabindex="-1" data-date="2020-02-08">8</td>
</tr>
<tr>
<td tabindex="-1" data-date="2020-02-09">9</td>
<td tabindex="-1" data-date="2020-02-10">10</td>
<td tabindex="-1" data-date="2020-02-11">11</td>
<td tabindex="-1" data-date="2020-02-12">12</td>
<td tabindex="-1" data-date="2020-02-13">13</td>
<td tabindex="0" data-date="2020-02-14" role="gridcell" aria-selected="true">14</td>
<td tabindex="-1" data-date="2020-02-15">15</td>
</tr>
<tr>
<td tabindex="-1" data-date="2020-02-16">16</td>
<td tabindex="-1" data-date="2020-02-17">17</td>
<td tabindex="-1" data-date="2020-02-18">18</td>
<td tabindex="-1" data-date="2020-02-19">19</td>
<td tabindex="-1" data-date="2020-02-20">20</td>
<td tabindex="-1" data-date="2020-02-21">21</td>
<td tabindex="-1" data-date="2020-02-22">22</td>
</tr>
<tr>
<td tabindex="-1" data-date="2020-02-23">23</td>
<td tabindex="-1" data-date="2020-02-24">24</td>
<td tabindex="-1" data-date="2020-02-25">25</td>
<td tabindex="-1" data-date="2020-02-26">26</td>
<td tabindex="-1" data-date="2020-02-27">27</td>
<td tabindex="-1" data-date="2020-02-28">28</td>
<td tabindex="-1" data-date="2020-02-29">29</td>
</tr>
<tr>
<td tabindex="-1" data-date="2020-02-30">30</td>
<td tabindex="-1" data-date="2020-02-31">31</td>
<td class="disabled" tabindex="-1"></td>
<td class="disabled" tabindex="-1"></td>
<td class="disabled" tabindex="-1"></td>
<td class="disabled" tabindex="-1"></td>
<td class="disabled" tabindex="-1"></td>
</tr>
</tbody>
</table>
</div>
<div class="dialog-message" aria-live="polite"></div>
<div class="dialog-ok-cancel-group">
<button class="dialog-button" value="cancel">Cancel</button>
<button class="dialog-button" value="ok">OK</button>
</div>
</div>
</div>