Datepicker

Import

Import the settings, the text-input and the field scss files.


@import 'settings-tools/all-settings';
@import 'components/c.text-input';
@import 'components/c.fields';

Usage

The easiest way to implement a date picker on a form field is to apply the following elements:

add the mc-field class on a html div element
add the mc-field__label class on a label element
add the mc-field__inputclass in addition of the mc-text-input class on an input element
use the type="date" attribute on your input element


<div class="mc-field">
  <label class="mc-field__label" for="example"> Label </label>
  <input
    type="date"
    class="mc-text-input mc-field__input"
    id="example"
    name="example"
  />
</div>

date picker appearance

Using the type="date" attribute on an input element triggers the automatic generation of a date picker by the browser. The appearance and overall features of this date picker will therefore depend on the browser used.

To have advanced control over appearance and features, you will have to use a JavaScript library for that (see below "Custom usage").

Browser support

The type="date" attribute is an HTML5 feature that some browsers do not support.

Indeed, for Safari, or IE < 11 browsers, using the type="date" attribute will have no effect, and will not generate a native datepicker.

For these browsers, you will therefore have to use a Javascript library.

Variations

You may use all existing text-input component variations.

Read the Text input component documentation for more information.

Behaviors

The states applicable to the date picker are identical to those applicable to the text-input component.

Read the Text input component documentation for more information.

Custom usage

The use of the type="date" attribute creates a concern for consistency in the appearance and feature of the date picker, as explained above. The way to solve this problem is to:

1. Using a type="text" attribute on your input element


<input
  type="text"
  class="mc-text-input mc-field__input"
  id="example"
  name="example"
/>

2. Use a JavaScript library of your choice

There are several JavaScript libraries on the market that allow you to implement a custom date picker that works consistently across all browsers.

Useful tip

Here are some links of JavaScript libraries we like: