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.
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.
<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>