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.