wip: replace flatpickr

assets/controllers/datepicker_controller.js

@@ -1,56 +1,70 @@
 import { Controller } from '@hotwired/stimulus'
-import flatpickr from 'flatpickr';
-import { German } from 'flatpickr/dist/l10n/de';
+import { Calendar } from 'vanilla-calendar-pro'
 
 /* stimulusFetch: 'lazy' */
 export default class extends Controller {
 
-    static targets = [ 'field' ]
+    static targets = ['field', 'hiddenField']
     static values = {
         minDate: String,
         maxDate: String,
         disableWeekends: Boolean,
-    }
-
-    initialize() {
-        flatpickr.localize(German)
+        disabledDates: Array,
     }
 
     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) {
+            inputMode: true,
+            locale: 'de-DE',
+            selectedTheme: 'light',
+            selectedDates: this.hiddenFieldTarget.value ? [this.hiddenFieldTarget.value] : [],
+            onClickDate: (self) => {
+                const iso = self.context.selectedDates[0] ?? null
+                this.hiddenFieldTarget.value = iso ?? ''
+                if (iso) {
+                    const [year, month, day] = iso.split('-')
+                    this.fieldTarget.value = `${day}.${month}.${year}`
+                } else {
+                    this.fieldTarget.value = ''
+                }
                 this.element.dispatchEvent(new CustomEvent('datepicker:picked', {
-                    detail: {
-                        date: instance.altInput.value
-                    }
+                    detail: { date: this.fieldTarget.value }
                 }))
             },
+            onHide: () => {
+                this.element.dispatchEvent(new CustomEvent('datepicker:closed'))
+            },
         }
 
-        if (true === this.disableWeekendsValue) {
-            options['disable'] =  [
-                function(date) {
-                    return (date.getDay() === 0 || date.getDay() === 6);
+        if (this.minDateValue) options.dateMin = this.minDateValue
+        if (this.maxDateValue) options.dateMax = this.maxDateValue
+        if (this.disableWeekendsValue) options.disableWeekdays = [0, 6]
+        if (this.disabledDatesValue.length) options.disableDates = this.disabledDatesValue
+
+        this.picker = new Calendar(this.fieldTarget, options)
+        this.picker.init()
+
+        this.handleManualInput = () => {
+            const value = this.fieldTarget.value.trim()
+            if (!value) {
+                this.hiddenFieldTarget.value = ''
+                this.picker.set({ selectedDates: [] }, { dates: true })
+            } else {
+                const match = value.match(/^(\d{1,2})\.(\d{1,2})\.(\d{4})$/)
+                if (match) {
+                    const [, day, month, year] = match
+                    const iso = `${year}-${month.padStart(2, '0')}-${day.padStart(2, '0')}`
+                    this.hiddenFieldTarget.value = iso
+                    this.picker.set({ selectedDates: [iso] }, { dates: true })
                 }
-            ]
+            }
+            this.element.dispatchEvent(new CustomEvent('datepicker:closed'))
         }
-
-        this.picker = flatpickr(this.fieldTarget, options)
+        this.fieldTarget.addEventListener('change', this.handleManualInput)
     }
 
     disconnect() {
+        this.fieldTarget.removeEventListener('change', this.handleManualInput)
         this.picker.destroy()
     }
 }

assets/styles/components/datepicker.css

@@ -1,13 +1,7 @@
-@import "flatpickr/dist/flatpickr.css";
+@import "vanilla-calendar-pro/styles/index.css";
+@import "vanilla-calendar-pro/styles/themes/light.css";
 
-.flatpickr-day.selected,
-.flatpickr-day.selected:hover,
-.flatpickr-day.selected:focus {
+[data-vc-theme=light] .vc-date[data-vc-date-selected] .vc-date__btn,
+[data-vc-theme=light] .vc-date[data-vc-date-selected] .vc-date__btn:hover {
     background-color: theme('colors.secondary');
-    border-color: theme('colors.secondary');
-}
-
-.flatpickr-monthDropdown-months,
-.flatpickr-current-month .flatpickr-monthDropdown-months {
-    @apply form-select pt-0 pb-0 focus:outline-none focus:shadow-none;
 }