Date picker

Date pickers are used for inputting dates from the user. It might be toggled when the user focuses an input of type date in a form.

This component requires Javascript

Examples

Here is an example of a date picker not attached to any element.

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.

Additional classes are -active for the selected date, -today for the current date and -inactive for deactivated dates.

Base

November 2018
S
M
T
W
T
F
S
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
<div class="m-datepicker -week-starts-on-sun -month-starts-on-thu">
  <div class="m-datepicker__month-row">
    <div class="prev -disabled">
      <i class="a-icon icon-chevron-left -sm"></i>
    </div>
    <div class="m-datepicker__month">
      November 2018
    </div>
    <div class="next">
      <i class="a-icon icon-chevron-right -sm -text--brand"></i>
    </div>
  </div>
  <div class="m-datepicker__day-names">
    <div class="m-datepicker__week-day">
      S
    </div>
    <div class="m-datepicker__week-day">
      M
    </div>
    <div class="m-datepicker__week-day">
      T
    </div>
    <div class="m-datepicker__week-day">
      W
    </div>
    <div class="m-datepicker__week-day">
      T
    </div>
    <div class="m-datepicker__week-day">
      F
    </div>
    <div class="m-datepicker__week-day">
      S
    </div>
  </div>
  <div class="m-datepicker__days">
    <div class="m-datepicker__day -inactive">
      1
    </div>
    <div class="m-datepicker__day -inactive">
      2
    </div>
    ...
    <div class="m-datepicker__day -inactive">
      18
    </div>
    <div class="m-datepicker__day -active">
      19
    </div>
    <div class="m-datepicker__day">
      20
    </div>
    ...
    <div class="m-datepicker__day">
      30
    </div>
  </div>
</div>