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

Implementation notes

Component ecl-datepickers depends on Pikaday. Please follow the installation guide of the library in order to add the JavaScript behaviors of datepickers to your project.

Because Pikaday works as a global, a possible way to include it in your site would be:

<script src="https://cdnjs.cloudflare.com/ajax/libs/pikaday/1.6.1/pikaday.min.js"></script>

If you’re using a bundler for your assets (like webpack or rollup), please keep in mind the list of known issues regarding how Pikaday handles dependencies to moment.js which you might not need.

Then, add an instantiation script similar to this:

var picker = new Pikaday({
  field: document.getElementById('datepicker'),
  firstDay: 1,
  maxDate: new Date(2020, 12, 31),
  theme: 'ecl-pika-theme',
  yearRange: [2000, 2020],
});

The most important setting is the theme: 'ecl-pika-theme' which will add the necessary styling of ECL on datepickers.

Please make sure you detach other libraries from the inputs of type dates like jQuery or its UI datepicker, which will conflict when having several behaviors attached to same elements.

{#
  Accepts:
    - "id" (string): the input ID (optional)
    - "name" (string): the input name (optional)
    - "value" (string): the default value (mm/dd/yyyy, optional)
    - "aria_label" (string): ARIA label (optional)
    - "extra_classes" (string): extra CSS classes to be added
    - "extra_attributes" (array): extra attributes classes (optional, format: [{ 'name': 'name_of_the_attribute', 'value': 'value_of_the_attribute'}])
#}

{% set _value = value|default('') %}
{% set _aria_label = aria_label|default('Use the arrow keys to pick a date') %}
{% set _css_class = 'ecl-datepickers' %}
{% set _id = id|default('datepicker') %}
{% set _name = name|default('datepicker') %}

{% if extra_classes is defined %}
  {% set _css_class = _css_class ~ ' ' ~ extra_classes %}
{% endif %}

{% if extra_attributes is defined %}
  {% for attr in extra_attributes %}
    {% set _extra_attributes = _extra_attributes ~ ' ' ~ attr.name ~ '="' ~ attr.value ~ '"' %}
  {% endfor %}
{% endif %}

{% spaceless %}
<div class="{{ _css_class }}"{{ _extra_attributes|raw }}>
  {% include '@ec-europa/ecl-forms-text-inputs' with {
    'type': 'text',
    'id': _id,
    'name': _name,
    'extraAttributes': [
      { 'name': 'aria-label', 'value': _aria_label },
      { 'name': 'value', 'value': _value }
    ]
  } %}
  <span class="ecl-datepickers__icon ecl-icon ecl-icon--calendar"></span>
</div>
{% endspaceless %}
 
{
  "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: 
    /*
* Datepicker styles based on Pikaday.
* @define datepickers
*/

$ecl-datepickers-color-select: #4f4f4f;
$ecl-datepickers-color-select-separator: #9f9f9f;
$ecl-datepickers-text-color: #333 !default;
$ecl-datepickers-title-bg: #404040 !default;
$ecl-datepickers-title-color: $ecl-datepickers-title-bg !default;
$ecl-datepickers-arrow-size: 50px;
$ecl-datepickers-picker-bg: #eaeaea !default;
$ecl-datepickers-day-bg: #f5f5f5 !default;
$ecl-datepickers-day-selected-bg: #ffd617 !default;
$ecl-datepickers-day-disabled-color: #999 !default;
$ecl-datepickers-week-color: #999 !default;

// Positioning the calendar icon.
.ecl-datepickers {
  margin: 0;
  position: relative;

  &__icon {
    color: map-get($ecl-colors, 'grey-50');
    // For the icon does not interfere with the clickable area.
    pointer-events: none;
    position: absolute;
    right: 0.7em;
    top: 0.6em;
  }
}

/* Spacing */

/* stylelint-disable-next-line plugin/selector-bem-pattern */
* + .ecl-datepickers {
  margin-top: map-get($ecl-spacing, 'xs');
}

/*
 * @define pika-theme ; weak
 */

/* stylelint-disable max-nesting-depth */

.ecl-pika-theme {
  background: $ecl-datepickers-picker-bg;
  color: $ecl-datepickers-text-color;
  display: block;
  position: relative;
  z-index: map-get($ecl-z-index, 'modal');
  zoom: 1;

  /* postcss-bem-linter: ignore */
  &.is-hidden {
    display: none;
  }

  /* postcss-bem-linter: ignore */
  &.is-bound {
    position: absolute;
  }

  // clear child float (pika-lendar), using the famous micro clearfix hack
  // http://nicolasgallagher.com/micro-clearfix-hack/
  &::before,
  &::after {
    content: ' ';
    display: table;
  }

  &::after {
    clear: both;
  }

  .pika-title {
    background-color: $ecl-datepickers-title-bg;
    display: flex;
    height: 2.5rem;
    line-height: 2.5rem;
    position: relative;
    text-align: center;
  }

  .pika-label {
    background-color: $ecl-datepickers-title-bg;
    color: $ecl-datepickers-title-color;
    display: inline-block;
    flex-grow: 1;
    position: relative;
  }

  .pika-label select {
    @include ecl-form-control();
    @include ecl-focus-outline-border(3px, map-get($ecl-colors, 'yellow-100'), -3px, none);

    appearance: none;
    background-color: $ecl-datepickers-color-select;
    border: 0;
    color: #fff;
    cursor: pointer;
    float: none;
    height: 100%;
    margin: 0;
    min-height: auto;
    padding: 0 1em;
    position: absolute;
    text-indent: 0.01px;
    text-overflow: '';
    width: 100%;
    z-index: map-get($ecl-z-index, 'modal') - 1;

    // Fix for IE 10+.
    &::-ms-expand {
      display: none;
    }

    &:focus {
      z-index: map-get($ecl-z-index, 'highlight');
    }

    &:hover,
    &:active,
    &:focus {
      border-color: $ecl-color-primary;
      color: #fff;
    }
  }

  // The left select to the left.
  .pika-label:nth-child(1) select {
    border-right: 2px solid $ecl-datepickers-color-select-separator;
    left: 0;
  }

  // The right select to the right.
  .pika-label:nth-child(2) select {
    right: 0;
  }

  .pika-prev,
  .pika-next {
    background-color: transparent;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 75% 75%;
    border: 0;
    color: $ecl-datepickers-title-bg; // hide text
    cursor: pointer;
    display: block;
    height: 100%;
    outline: none;
    overflow: hidden;
    padding: 0;
    position: relative;
    top: 0;
    white-space: nowrap;
    width: $ecl-datepickers-arrow-size;
  }

  .pika-prev {
    float: left;
    left: 0;
    order: -1;

    &::after {
      @extend %ecl-icon--after;
      @extend %ecl-icon--right;

      @include ecl-icon('right');

      color: #fff;
      left: 15px;
      position: absolute;
      top: 15px;
      transform: rotate(180deg);
    }
  }

  .pika-next {
    float: right;
    right: 0;

    &::after {
      @extend %ecl-icon--after;
      @extend %ecl-icon--right;

      @include ecl-icon('right');

      color: #fff;
      position: absolute;
      right: 15px;
      top: 15px;
    }
  }

  .pika-prev:hover,
  .pika-next:hover {
    opacity: 1;
  }

  .pika-prev.is-disabled,
  .pika-next.is-disabled {
    cursor: default;
  }

  .is-rtl .pika-prev {
    float: right;
    right: 0;

    &::after {
      @extend %ecl-icon--after;
      @extend %ecl-icon--right;

      @include ecl-icon('right');

      color: #fff;
      position: absolute;
      right: 15px;
      top: 15px;
    }
  }

  .is-rtl .pika-next {
    float: left;
    left: 0;
    order: -1;

    &::after {
      @extend %ecl-icon--after;
      @extend %ecl-icon--right;

      @include ecl-icon('right');

      color: #fff;
      left: 15px;
      position: absolute;
      top: 15px;
      transform: rotate(180deg);
    }
  }

  .pika-select {
    display: inline-block;
  }

  .pika-table {
    background-color: map-get($ecl-colors, 'grey-15');
    border-bottom: map-get($ecl-spacing, 'xxs') solid transparent;
    border-collapse: collapse;
    border-left: map-get($ecl-spacing, 'xxs') solid transparent;
    border-right: map-get($ecl-spacing, 'xxs') solid transparent;
    border-spacing: 0;
    width: 100%;

    th,
    td {
      padding: 1px;
    }

    th {
      padding: map-get($ecl-spacing, 'xxs') map-get($ecl-spacing, 'xxxs');
      text-align: center;
    }

    abbr {
      border-bottom: 0;
      cursor: help;
      font-weight: normal;
      text-decoration: none;
    }
  }

  .pika-button {
    background: $ecl-datepickers-day-bg;
    border: 0;
    box-sizing: border-box;
    cursor: pointer;
    display: block;
    font-size: map-get($ecl-font-size, 'm');
    margin: 1px;
    outline: none;
    padding: map-get($ecl-spacing, 'xxxs') map-get($ecl-spacing, 'xxs');
    text-align: center;
    width: 100%;

    .is-selection-disabled {
      cursor: default;
      pointer-events: none;
    }
  }

  .is-today .pika-button {
    background: $ecl-datepickers-day-selected-bg;
  }

  .is-selected .pika-button {
    background: $ecl-datepickers-day-selected-bg;
  }

  .is-disabled .pika-button,
  .is-outside-current-month .pika-button {
    color: $ecl-datepickers-day-disabled-color;
    opacity: 0.3;
  }

  .is-disabled .pika-button {
    cursor: default;
    pointer-events: none;
  }

  .pika-week {
    color: $ecl-datepickers-week-color;
  }

  .is-inrange .pika-button {
    background: #fff;
  }
}

@include ecl-media-breakpoint-up(xs) {
  .ecl-pika-theme {
    .pika-lendar,
    .pika-single,
    .pika-table {
      width: auto;
    }
  }
}
  • URL: /components/raw/ecl-datepickers/_datepickers.scss
  • Filesystem Path: framework/components/ecl-datepickers/_datepickers.scss
  • Size: 6.5 KB
  • Handle: @ec-europa/ecl-datepickers
  • Tags: molecule
  • Preview:
  • Filesystem Path: framework/components/ecl-datepickers/ecl-datepickers.twig