wip: implement admin crud

assets/controllers/datepicker_controller.js

@@ -0,0 +1,56 @@
+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()
+    }
+}