Switch to Wilmington
DesignDevelop
Version 4.5.1
Overview

Date Select

Date select is a type of form input that allows the user to select the month, day and year for a specific date. The calendar icon orients the user to the purpose of the component. Each of the input elements consists of a container, and a select or text input. For accessibility, always use date pickers with a label.

Variants

Date Select

In addition to the default state, each selectable element of the date select bar also has an active state, a focus state and a selected state. In the active state, a dropdown presents input options with their own hover states. Once the user selects an option, the dropdown disappears, and the selected state appears for that element.

<div class="c-date">
    <div class="c-date__icon-container">
      <i class="c-date__icon icon icon--calendar"></i>
    </div>
    <select class="c-date__month">
        <option value="">Month</option>
        <option value="1">January</option>
        <option value="2">February</option>
        <option value="3">March</option>
        <option value="4">April</option>
        <option value="5">May</option>
        <option value="6">June</option>
        <option value="7">July</option>
        <option value="8">August</option>
        <option value="9">September</option>
        <option value="10">October</option>
        <option value="11">November</option>
        <option value="12">December</option>
    </select>
    <select class="c-date__day">
        <option value="">Day</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
        <option value="10">10</option>
        <option value="11">11</option>
        <option value="12">12</option>
        <option value="13">13</option>
        <option value="14">14</option>
        <option value="15">15</option>
        <option value="16">16</option>
        <option value="17">17</option>
        <option value="18">18</option>
        <option value="19">19</option>
        <option value="20">20</option>
        <option value="21">21</option>
        <option value="22">22</option>
        <option value="23">23</option>
        <option value="24">24</option>
        <option value="25">25</option>
        <option value="26">26</option>
        <option value="27">27</option>
        <option value="28">28</option>
        <option value="29">29</option>
        <option value="30">30</option>
        <option value="31">31</option>
    </select>
    <select class="c-date__year">
        <option value="">Year</option>
        <option value="i+2017">2018</option>
        <option value="i+2017">2019</option>
        <option value="i+2017">2020</option>
        <option value="i+2017">2021</option>
        <option value="i+2017">2022</option>
        <option value="i+2017">2023</option>
        <option value="i+2017">2024</option>
        <option value="i+2017">2025</option>
        <option value="i+2017">2026</option>
        <option value="i+2017">2027</option>
        <option value="i+2017">2028</option>
        <option value="i+2017">2029</option>
        <option value="i+2017">2030</option>
        <option value="i+2017">2031</option>
        <option value="i+2017">2032</option>
        <option value="i+2017">2033</option>
        <option value="i+2017">2034</option>
        <option value="i+2017">2035</option>
        <option value="i+2017">2036</option>
        <option value="i+2017">2037</option>
    </select>
</div>
Copy
International Date Select

This International Date Select offers the same functionality of the default in a widely recognized international date format (DD/MM/YYYY). The states in the International Date Select function identically to the default.

<div class="c-date">
    <div class="c-date__icon-container">
      <i class="c-date__icon icon icon--calendar"></i>
    </div>
    <select class="c-date__day">
        <option value="">Day</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
        <option value="10">10</option>
        <option value="11">11</option>
        <option value="12">12</option>
        <option value="13">13</option>
        <option value="14">14</option>
        <option value="15">15</option>
        <option value="16">16</option>
        <option value="17">17</option>
        <option value="18">18</option>
        <option value="19">19</option>
        <option value="20">20</option>
        <option value="21">21</option>
        <option value="22">22</option>
        <option value="23">23</option>
        <option value="24">24</option>
        <option value="25">25</option>
        <option value="26">26</option>
        <option value="27">27</option>
        <option value="28">28</option>
        <option value="29">29</option>
        <option value="30">30</option>
        <option value="31">31</option>
    </select>
    <select class="c-date__month">
        <option value="">Month</option>
        <option value="1">January</option>
        <option value="2">February</option>
        <option value="3">March</option>
        <option value="4">April</option>
        <option value="5">May</option>
        <option value="6">June</option>
        <option value="7">July</option>
        <option value="8">August</option>
        <option value="9">September</option>
        <option value="10">October</option>
        <option value="11">November</option>
        <option value="12">December</option>
    </select>
    <select class="c-date__year">
        <option value="">Year</option>
        <option value="i+2017">2018</option>
        <option value="i+2017">2019</option>
        <option value="i+2017">2020</option>
        <option value="i+2017">2021</option>
        <option value="i+2017">2022</option>
        <option value="i+2017">2023</option>
        <option value="i+2017">2024</option>
        <option value="i+2017">2025</option>
        <option value="i+2017">2026</option>
        <option value="i+2017">2027</option>
        <option value="i+2017">2028</option>
        <option value="i+2017">2029</option>
        <option value="i+2017">2030</option>
        <option value="i+2017">2031</option>
        <option value="i+2017">2032</option>
        <option value="i+2017">2033</option>
        <option value="i+2017">2034</option>
        <option value="i+2017">2035</option>
        <option value="i+2017">2036</option>
        <option value="i+2017">2037</option>
    </select>
</div>
Copy
September 2021
S
M
T
W
T
F
S
29
30
31
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
1
2
Calendar Picker

Use the calendar picker to give the user more context when choosing a date, such as the day of the week a date falls. Calendar pickers are also useful when there is a need to restrict the user input, e.g. for unavailable dates, or to highlight a date that will aid decision-making, e.g. a start date when choosing a range. Do not use calendar pickers for well-known dates such as birthdays.

<div class="c-calendar">
<div class="c-calendar__header">
  <div class="c-calendar__month-select">
    <div class="c-calendar__arrow">
      <i class="icon icon--arrow-without-tail-left"></i>
    </div>
    <div class="c-calendar__month">September 2021</div>
    <div class="c-calendar__arrow">
      <i class="icon icon--arrow-without-tail-right"></i>
    </div>
  </div>
</div>
<div class="c-calendar__body">
  <div class="c-calendar__days-of-week">
    <div>S</div>
    <div>M</div>
    <div>T</div>
    <div>W</div>
    <div>T</div>
    <div>F</div>
    <div>S</div>
  </div>
  <div class="c-calendar__week">
    <div class="c-calendar__day c-calendar__day--disabled">29</div>
    <div class="c-calendar__day c-calendar__day--disabled">30</div>
    <div class="c-calendar__day c-calendar__day--disabled">31</div>
    <div class="c-calendar__day">1</div>
    <div class="c-calendar__day">2</div>
    <div class="c-calendar__day">3</div>
    <div class="c-calendar__day">4</div>
  </div>
  <div class="c-calendar__week">
    <div class="c-calendar__day">5</div>
    <div class="c-calendar__day">6</div>
    <div class="c-calendar__day">7</div>
    <div class="c-calendar__day">8</div>
    <div class="c-calendar__day">9</div>
    <div class="c-calendar__day">10</div>
    <div class="c-calendar__day">11</div>
  </div>
  <div class="c-calendar__week">
    <div class="c-calendar__day">12</div>
    <div class="c-calendar__day">13</div>
    <div class="c-calendar__day">14</div>
    <div class="c-calendar__day">15</div>
    <div class="c-calendar__day">16</div>
    <div class="c-calendar__day">17</div>
    <div class="c-calendar__day">18</div>
  </div>
  <div class="c-calendar__week">
    <div class="c-calendar__day">19</div>
    <div class="c-calendar__day">20</div>
    <div class="c-calendar__day">21</div>
    <div class="c-calendar__day">22</div>
    <div class="c-calendar__day">23</div>
    <div class="c-calendar__day c-calendar__day--selected">24</div>
    <div class="c-calendar__day">25</div>
  </div>
  <div class="c-calendar__week">
    <div class="c-calendar__day">26</div>
    <div class="c-calendar__day">27</div>
    <div class="c-calendar__day">28</div>
    <div class="c-calendar__day">29</div>
    <div class="c-calendar__day">30</div>
    <div class="c-calendar__day c-calendar__day--disabled">1</div>
    <div class="c-calendar__day c-calendar__day--disabled">2</div>
  </div>
</div>
</div>
Copy

States

The Default and International variants of the date select have the same states as the select component. Each selectable element of the date select has an active state, a focus state and a selected state. The date input variant has the same states as a text input

The error state for all variants will highlight the entire container red to draw the user's attention and an input error component will appear below the length of the container to guide the user in correcting the error. Use the c-date--error class on the parent date element to apply the error state.

Design Environment

Please select today's date.

Any date input in the error state must appear with an input error component.