Switch to M&TOverview
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, a text label, and a dropdown list.
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. The error state takes the form of an Input Error component.
HTML
Vanilla JS
<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.
HTML
Vanilla JS
<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