Europa Component Library

Datepickers

Documentation • Demo

Datepickers

Why and how to use this component

Users need a way to scan quickly a date related to an event.

This component appears when you need to enter a date.

By clicking in the date field a pop-up displays a calendar. It allows the user to select a time or a date value instead of typing it. This greatly reduces the likelihood of mistakes.

When to use this component

  • on the filter component, date field

Do not use this component

  • outside of the filter component
{% include '@ec-europa/ecl-datepickers' with context %}
 
{
  "value": "04/01/2017"
}
 
<div class="ecl-datepickers">

  <input type="text" class="ecl-text-input" id="datepicker" name="datepicker" aria-label="Use the arrow keys to pick a date" value="04/01/2017" /><span class="ecl-datepickers__icon ecl-icon ecl-icon--calendar"></span></div>
  • Content: 
    .ecl-datepickers {
  &:focus {
    border-color: map-get($ema-colors, 'blue-1');
    outline-color: map-get($ema-colors, 'blue-1');
  }
}
  • URL: /components/raw/ema-datepickers/ema-datepickers.scss
  • Filesystem Path: framework/components/ema-datepickers/ema-datepickers.scss
  • Size: 138 Bytes
  • Handle: @ec-europa/ema-datepickers
  • Tags: molecule
  • Preview:
  • Filesystem Path: framework/components/ema-datepickers/ema-datepickers.twig