Components

Datepicker

sketch:Readyscss:Ready

Date picker allows the user to directly enter a specific date or choose a date from a calendar layout in a form element.

Viewport: px
<div class="example">
<input type="date" class="mc-text-input" name="example" />
</div>

Behaviour

The date picker can be used in two different ways depending on the browser it is displayed.

Date entry

The user can directly type the date using the number keys of the keyboard.

Calendar entry

The icon in the field triggers a calendar layout and allows the user to click on the wanted date.

Do & dont's

Use a date picker for date data only.
Never use the date picker when the user needs to enter a numeric value.