Fixed that the date can be set (the clear button is currently broken)

Author: cz-lucas

public/js/dist/filterFormManager.js

@@ -4,7 +4,7 @@ import {
     AssignedEntityFilterInput,
     DateFilterInput,
     TextFilterInput
-} from '/js/dist/filterInputs.min.js';
+} from '/js/dist/filterInputs.js';
 import { container } from '/js/dist/simpleDIContainer.min.js';
 
 export default class FilterFormManager {

public/js/dist/filterFormManager.min.js

@@ -257,39 +257,62 @@ class AssignedEntityFilterInput extends SelectFilterInput {
 }
 
 class DateFilterInput extends FilterInput {
-
     constructor(el, apiService) {
         super(el, apiService);
 
-        this.container = this.element.closest('.input-daterange');
+        // assign as class properties
+        this.startDatepickerInput = document.getElementById(el.id + "_start");
+        this.endDatepickerInput = document.getElementById(el.id + "_end");
+
+        if (this.startDatepickerInput) {
+            this.startDatepicker = $(this.startDatepickerInput).datepicker({
+                todayBtn: "linked",
+                clearBtn: true,
+                disableTouchKeyboard: true,
+                forceParse: false,
+                keepEmptyValues: true,
+                daysOfWeekHighlighted: "0,6",
+                todayHighlight: true,
+                format: "yyyy-mm-dd",
+            });
+        }
 
-        let datepicker = null;
-        if (this.container) {
-            datepicker = $(this.container).datepicker({
+        if (this.endDatepickerInput) {
+            this.endDatepicker = $(this.endDatepickerInput).datepicker({
                 todayBtn: "linked",
                 clearBtn: true,
                 disableTouchKeyboard: true,
                 forceParse: false,
                 keepEmptyValues: true,
                 daysOfWeekHighlighted: "0,6",
-                todayHighlight: true
+                todayHighlight: true,
+                format: "yyyy-mm-dd",
             });
         }
 
-        datepicker.on('changeDate', (event) => {
-            if (event.target.id.endsWith("_start")) {
+        // event listeners (check element exists)
+        if (this.startDatepickerInput) {
+            $(this.startDatepickerInput).on('changeDate', (event) => {
                 this.startDate = new Intl.DateTimeFormat('en-CA').format(event.date);
-            } else {
+            });
+
+            $(this.startDatepickerInput).on('clearDate', (_) => {
+                this.startDate = undefined;
+            });
+        }
+
+        if (this.endDatepickerInput) {
+            $(this.endDatepickerInput).on('changeDate', (event) => {
                 this.endDate = new Intl.DateTimeFormat('en-CA').format(event.date);
-            }
-        });
+            });
 
-        datepicker.on('clearDate', (_) => {
-            this.startDate = undefined;
-            this.endDate = undefined;
-        });
+            $(this.endDatepickerInput).on('clearDate', (_) => {
+                this.endDate = undefined;
+            });
+        }
     }
 
+
     getValue() {
         const result = {};
 
@@ -310,40 +333,24 @@ class DateFilterInput extends FilterInput {
     }*/
 
     setValue(newValue, logic, operator) {
-        console.log("setdate");
+
         return new Promise((resolve, reject) => {
             try {
-                //console.log(newValue);
-
-                const $container = $(this.container);
-                const $startInput = $container.find('input:first');
-                const $endInput = $container.find('input:last');
-                console.log($startInput);
-                console.log($endInput);
 
                 if (newValue.startDate != undefined) {
-                    // Set the value directly and update datepicker
-                    $startInput.val = newValue.startDate;
-                    const d = document.getElementById($startInput[0].id);
-                    console.log(d);
-                    d.value = newValue.startDate;
-                    $startInput.datepicker('update');
+                    const startDateObject = new Date(newValue.startDate);
+                    console.log("start", newValue.startDate, startDateObject);
+                    this.startDatepicker.datepicker('setDate', startDateObject);
                 }
 
                 if (newValue.endDate != undefined) {
-                    // Set the value directly and update datepicker
-                    $endInput.val = newValue.endDate;
-                    const d = document.getElementById($endInput[0].id);
-                    console.log(d);
-                    d.value = newValue.endDate;
-                    $endInput.datepicker('update');
+                    const endDateObject = new Date(newValue.endDate);
+                    console.log("end", newValue.endDate, endDateObject);
+                    this.endDatepicker.datepicker('setDate', endDateObject);
                 }
 
-                // Trigger change event to update any listeners
-                $startInput.trigger('changeDate');
-                $endInput.trigger('changeDate');
-
                 this.setSearchOperator(logic, operator);
+                console.log("this.getvalues", this.getValue());
                 resolve(newValue);
             }
             catch (e) {
@@ -354,12 +361,16 @@ class DateFilterInput extends FilterInput {
     }
 
     clear() {
-        const r = this.getValue();
+        /*const r = this.getValue();
         if (r.startDate !== undefined || r.endDate !== undefined) {
             // I don't know why this is needed but without it won't reset properly
             $(this.container).datepicker('setDates', ['2000-01-01', '2000-01-02']);
             $(this.container).datepicker('clearDates');
-        }
+        }*/
+        //this.startDatepicker.datepicker('clearDates');
+        //this.endDatepicker.datepicker('clearDates');
+        this.startDate = undefined;
+        this.endDate = undefined;
 
         super.clear();
     }