63 lines
1.4 KiB
JavaScript
63 lines
1.4 KiB
JavaScript
import flatpickr from 'flatpickr';
|
|
import { Utility } from '../../core/utility';
|
|
|
|
const DATEPICKER_UTIL_SELECTOR = 'input[type="date"], input[type="time"], input[type="datetime-local"]';
|
|
|
|
const DATEPICKER_INITIALIZED_CLASS = 'datepicker--initialized';
|
|
|
|
const DATEPICKER_CONFIG = {
|
|
'datetime-local': {
|
|
enableTime: true,
|
|
altInput: true,
|
|
altFormat: 'j. F Y, H:i', // maybe interpolate these formats for locale
|
|
dateFormat: 'Y-m-dTH:i',
|
|
time_24hr: true,
|
|
},
|
|
'date': {
|
|
altFormat: 'j. F Y',
|
|
dateFormat: 'Y-m-d',
|
|
altInput: true,
|
|
},
|
|
'time': {
|
|
enableTime: true,
|
|
noCalendar: true,
|
|
altFormat: 'H:i',
|
|
dateFormat: 'H:i',
|
|
altInput: true,
|
|
time_24hr: true,
|
|
},
|
|
};
|
|
|
|
@Utility({
|
|
selector: DATEPICKER_UTIL_SELECTOR,
|
|
})
|
|
export class Datepicker {
|
|
|
|
flatpickrInstance;
|
|
|
|
constructor(element) {
|
|
if (!element) {
|
|
throw new Error('Datepicker utility needs to be passed an element!');
|
|
}
|
|
|
|
if (element.classList.contains(DATEPICKER_INITIALIZED_CLASS)) {
|
|
return false;
|
|
}
|
|
|
|
const flatpickrConfig = DATEPICKER_CONFIG[element.getAttribute('type')];
|
|
|
|
if (!flatpickrConfig) {
|
|
throw new Error('Datepicker utility called on unsupported element!');
|
|
}
|
|
|
|
this.flatpickrInstance = flatpickr(element, flatpickrConfig);
|
|
|
|
// mark initialized
|
|
element.classList.add(DATEPICKER_INITIALIZED_CLASS);
|
|
}
|
|
|
|
destroy() {
|
|
this.flatpickrInstance.destroy();
|
|
}
|
|
}
|