-
Notifications
You must be signed in to change notification settings - Fork 6
/
datetimepicker.js
41 lines (34 loc) · 1.25 KB
/
datetimepicker.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
import flatpickr from 'flatpickr';
export default class DateTimePicker {
constructor(el, opt = {}) {
this.el = el;
[this.input] = el.getElementsByClassName('datetime-input-locale');
[this.formattedEl] = el.getElementsByClassName('datetime-formatted');
this.options = Object.assign({
enableTime: true,
time_24hr: true,
dateFormat: 'D, j M Y H:i',
onChange: (selectedDates) => {
this.onChange(selectedDates);
},
}, opt);
this.init();
}
init() {
this.picker = flatpickr(this.input, this.options);
!!this.formattedEl.value && this.picker.setDate(this.formattedEl.value, false, 'Y-m-dTH:i');
this.toggleClearBtn();
[...this.el.getElementsByClassName('js-clear-input')].forEach(el => el.addEventListener('click', this.clear.bind(this)));
}
onChange(date) {
this.formattedEl.value = date.length ? flatpickr.formatDate(date[0], 'Y-m-dTH:i') : '';
this.toggleClearBtn();
}
toggleClearBtn() {
this.input.value ? this.el.classList.add('date-entered') : this.el.classList.remove('date-entered');
}
clear(e) {
e.preventDefault();
this.picker.clear();
}
}