@drivania/styles-common v1.3.1

Drivania common styles

Installation

In your js/app.js file:

import '@drivania/styles-common/js/main'; 

In your scss/app.scss file, at the top of the file:

@import "~@drivania/styles-common/scss/main-dark";

Using tiny-date-picker

Run:

npm i tiny-date-picker --save-dev

Add to your SCSS:

@import '~tiny-date-picker/date-range-picker.css';
@import '~tiny-date-picker/tiny-date-picker.css';
@import "~@drivania/styles-common/scss/tiny-date-picker";

Add to your JS:

import {DateRangePicker} from 'tiny-date-picker/dist/date-range-picker';

Example of usage:

const root = document.querySelector('.event-dates');
const startDateInput = root.querySelector('#eventStart');
const endDateInput = root.querySelector('#eventEnd');
const container = root.querySelector('.datepicker-range');

DateRangePicker(container)
    .on('statechange', function (_, rp) {
        // Update the inputs when the state changes
        var range = rp.state;
        startDateInput.value = range.start ? range.start.toDateString() : '';
        endDateInput.value = range.end ? range.end.toDateString() : '';

        if (range.end) {
            container.classList.remove('ex-inputs-picker-visible');
        }
    });

startDateInput.addEventListener('focus', showPicker);
endDateInput.addEventListener('focus', showPicker);

function showPicker() {
    container.classList.add('ex-inputs-picker-visible');
}


// If focus leaves the root element, it is not in the date
// picker or the inputs, so we should hide the date picker
// we do this in a setTimeout because redraws cause temporary
// loss of focus.
let previousTimeout;
root.addEventListener('focusout', function hidePicker() {
    clearTimeout(previousTimeout);
    previousTimeout = setTimeout(function() {
        if (!root.contains(document.activeElement)) {
            container.classList.remove('ex-inputs-picker-visible');
        }
    }, 10);
});