Component Library

Datepicker 

<div class="datepicker">
    <input type="date" class="js-datepicker input datepicker__input" name="datepicker" id="datepickerId">
    <label for="datepickerId" class="button button--primary button--ghost">
    This is a datepicker
  </label>
</div>
 
<div class="datepicker">
  <input type="date" class="js-datepicker input datepicker__input" name="{{ name }}" id="{{ id }}">
  <label for="{{ id }}" class="button button--primary button--ghost">
    {{ label }}
  </label>
</div>
 
{
  "name": "datepicker",
  "id": "datepickerId",
  "label": "This is a datepicker"
}
  • Content: 
    .datepicker {
    display: flex;
    flex-direction: column;

    @media (--viewport-ms-min) {
        flex-direction: row;
    }

    &__input {
        margin-bottom: 15px;

        @media (--viewport-ms-min) {
            margin-bottom: 0;
            margin-right: 15px;
        }
    }
}

.flatpickr-calendar {
    .flatpickr-day.endRange,
    .flatpickr-day.endRange.inRange,
    .flatpickr-day.endRange.nextMonthDay,
    .flatpickr-day.endRange.prevMonthDay,
    .flatpickr-day.endRange:focus,
    .flatpickr-day.endRange:hover,
    .flatpickr-day.selected,
    .flatpickr-day.selected.inRange,
    .flatpickr-day.selected.nextMonthDay,
    .flatpickr-day.selected.prevMonthDay,
    .flatpickr-day.selected:focus,
    .flatpickr-day.selected:hover,
    .flatpickr-day.startRange,
    .flatpickr-day.startRange.inRange,
    .flatpickr-day.startRange.nextMonthDay,
    .flatpickr-day.startRange.prevMonthDay,
    .flatpickr-day.startRange:focus,
    .flatpickr-day.startRange:hover {
        background: var(--color-primary);
        color: var(--color-white);
        border-color: var(--color-primary);
        box-shadow: none;
    }
}
  • URL: /components/raw/datepicker/datepicker.css
  • Filesystem Path: src/01-atoms/forms/datepicker/datepicker.css
  • Size: 1.1 KB
  • Content: 
    'use strict';

/**
 * @name Novicell Datepicker
 * @desc A script that inits flatpickr on .js-datepicker
 * @author Bjørn Nyborg (BNY)
 * @example <form data-validate>
 * @requires https://github.com/flatpickr/flatpickr
 */

var novicell = novicell || {};

novicell.datepicker =
    novicell.datepicker ||
    new function() {
        this.init = function() {
            const datepickers = document.querySelectorAll('.js-datepicker');

            if (datepickers.length) {
                flatpickr('.js-datepicker', {
                    altFormat: 'F j, Y',
                    dateFormat: 'Y-m-d'
                });
            }
        };
    }();
  • URL: /components/raw/datepicker/datepicker.js
  • Filesystem Path: src/01-atoms/forms/datepicker/datepicker.js
  • Size: 658 Bytes

There are no notes for this item.