ngx-ode-ui 4.8.0-develop-pedago.8 → 4.8.0-develop-pedago.9

package/fesm2020/ngx-ode-ui.mjs

@@ -202,6 +202,8 @@ class DatepickerComponent extends OdeComponent {
         this.changeDate = new EventEmitter();
         this.onChangeCallback = NOOP;
         this.onTouchedCallback = NOOP;
+        this.onInputChangeObserver = null;
+        this.debounceTimer = null;
     }
     get value() {
         return this.innerValue;
@@ -250,23 +252,37 @@ class DatepickerComponent extends OdeComponent {
             altInput: !this.disabled,
             altFormat: 'd/m/Y',
             dateFormat: 'Y-m-d',
-            allowInput: false,
+            allowInput: true,
             enableTime: this.enableTime,
             minDate: this.minDate,
             maxDate: this.maxDate,
             clickOpens: false,
             wrap: true,
-            locale: datePickerLocale
+            locale: datePickerLocale,
+            onChange: (selectedDates, dateStr) => {
+                this.value = dateStr;
+            },
+            onClose: () => {
+                this.onTouchedCallback();
+            }
         };
         this.datePickerInst = new Flatpickr(this.datePickerElement.nativeElement, options);
         if (!this.disabled) {
+            // Add click handler for the alt input
             this.datePickerInst.altInput.addEventListener('click', e => {
                 if (!this.readonly) {
                     this.datePickerInst.toggle();
                 }
             });
+            // Add blur handler for manual entry
+            this.datePickerInst.altInput.addEventListener('blur', e => {
+                const inputDate = this.datePickerInst.parseDate(this.datePickerInst.altInput.value, options.altFormat);
+                if (inputDate) {
+                    this.datePickerInst.setDate(inputDate, true);
+                }
+            });
         }
-        // Force updating the date input readonly attribute :
+        // Force updating the date input readonly attribute
         this.readonly = this._readonly;
     }
     ngOnDestroy() {