57 lines
1.6 KiB
JavaScript
57 lines
1.6 KiB
JavaScript
import { Controller } from '@hotwired/stimulus'
|
|
import flatpickr from 'flatpickr';
|
|
import { German } from 'flatpickr/dist/l10n/de';
|
|
|
|
/* stimulusFetch: 'lazy' */
|
|
export default class extends Controller {
|
|
|
|
static targets = [ 'field' ]
|
|
static values = {
|
|
minDate: String,
|
|
maxDate: String,
|
|
disableWeekends: Boolean,
|
|
}
|
|
|
|
initialize() {
|
|
flatpickr.localize(German)
|
|
}
|
|
|
|
connect() {
|
|
const minDate = this.minDateValue
|
|
const maxDate = this.maxDateValue
|
|
const options = {
|
|
dateFormat: 'Y-m-d',
|
|
altFormat: 'd.m.Y',
|
|
minDate,
|
|
maxDate,
|
|
altInput: true,
|
|
allowInput: true,
|
|
onClose(dates, currentdatestring, instance) {
|
|
instance.setDate(instance.altInput.value, true, instance.config.altFormat)
|
|
this.element.dispatchEvent(new CustomEvent('datepicker:closed'))
|
|
},
|
|
onChange(dates, currentdatestring, instance) {
|
|
this.element.dispatchEvent(new CustomEvent('datepicker:picked', {
|
|
detail: {
|
|
date: instance.altInput.value
|
|
}
|
|
}))
|
|
},
|
|
}
|
|
|
|
if (true === this.disableWeekendsValue) {
|
|
options['disable'] = [
|
|
function(date) {
|
|
return (date.getDay() === 0 || date.getDay() === 6);
|
|
}
|
|
]
|
|
}
|
|
|
|
this.picker = flatpickr(this.fieldTarget, options)
|
|
}
|
|
|
|
disconnect() {
|
|
this.picker.destroy()
|
|
}
|
|
}
|