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();
|
|
}
|
|
}
|