as-datepicker

A custom datepicker component.

Usage

The following HTML is needed for the datepicker to work:

<div class="datepicker" tabindex="0">
    <label>Date</label>
    <div class="date-field">
        <input type="text" class="date-input" value="01-14-2016" />
        <span class="date-button-icon">
            <svg class="svg-icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#placeholder"></use></svg>
        </span>
    </div>
    <div class="datepicker-calendar"></div>
</div>

It is possible to use a default browser datepicker and have as-datepicker as a fall back for the browsers that do not support it (Firefox, Internet Explorer, Safari). In this case, the input's type should be date instead of text.

Options

as-datepicker has the following options:

const defaultOptions = {
    dayNameLength: 1,
    dayNames: ['Søndag', 'Mandag', 'Tirsdag', 'Onsdag', 'Torsdag', 'Fredag', 'Lørdag'],
    dateFormat: 'dd-MM-yyyy',
    monthNameLength: 3,
    monthNames: ['Januar', 'Februar', 'Marts', 'April', 'Maj', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'December'],
    noAutoHide:true,
    showOnHover:false
};

• dayNameLength references the number of characters displayed as the name of week day.
• dayNames references the list of names of the week day.
• dateFormat references the desired date format.
• monthNameLength references the number of characters displayed for the month title in the months option view.
• monthNames references the list of month names.
• noAutoHide: if true, dropdown calendar will remain open upon selection of a day and will be closed if clicked outside the component.
• showOnHover: if true, dropdown calendar will be displayed and closed upon hover event.