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.