mis-crystal-design-system 18.1.5-signal → 18.1.5

package/fesm2022/mis-crystal-design-system-datepicker_v2.mjs

@@ -276,6 +276,57 @@ dayjs.extend(customParseFormat);
 dayjs.extend(isSameOrAfter);
 dayjs.extend(isSameOrBefore);
 class TzDpContainerComponent {
+    /**
+     * Parse date string using configured format with fallback
+     */
+    parseDateWithMultipleFormats(dateString) {
+        if (!dateString || dateString === 'Invalid Date' || dateString === 'undefined' || dateString === 'null') {
+            return dayjs('invalid');
+        }
+        // First try the configured format
+        const configuredFormat = this.data?.dpConfig?.format;
+        if (configuredFormat) {
+            try {
+                const parsed = this.parseZoneInstance(dateString, configuredFormat);
+                if (parsed.isValid()) {
+                    return parsed;
+                }
+            }
+            catch (error) {
+                // Continue to fallback formats
+            }
+        }
+        // Fallback to common formats if configured format fails
+        const fallbackFormats = [
+            'DD/MMM/YYYY',
+            'DD/MM/YYYY',
+            'DD-MMM-YYYY',
+            'DD-MM-YYYY',
+            'YYYY-MM-DD'
+        ];
+        for (const format of fallbackFormats) {
+            try {
+                const parsed = this.parseZoneInstance(dateString, format);
+                if (parsed.isValid()) {
+                    return parsed;
+                }
+            }
+            catch (error) {
+                // Continue to next format
+            }
+        }
+        // If all formats fail, try parsing without format (let dayjs guess)
+        try {
+            const parsed = this.parseZoneInstance(dateString);
+            if (parsed.isValid()) {
+                return parsed;
+            }
+        }
+        catch (error) {
+            console.warn('Failed to parse date with any format:', dateString, error);
+        }
+        return dayjs('invalid');
+    }
     constructor(data, toast) {
         this.toast = toast;
         this.parseZoneInstance = (...args) => {
@@ -514,7 +565,7 @@ class TzDpContainerComponent {
     currentDateInstance() {
         try {
             if (this.data.date) {
-                const selectedDate = dayjs(this.data.date, this.data.dpConfig.format);
+                const selectedDate = this.parseDateWithMultipleFormats(this.data.date);
                 if (selectedDate.isValid()) {
                     this.selectedYearSignal.set(selectedDate.year());
                     this.currentYearNumberSignal.set(selectedDate.year());
@@ -621,7 +672,7 @@ class TzDpContainerComponent {
             let maxDate = null;
             if (this.data.dpConfig.minDate) {
                 try {
-                    minDate = this.parseZoneInstance(this.data.dpConfig.minDate, this.data.dpConfig.format);
+                    minDate = this.parseDateWithMultipleFormats(this.data.dpConfig.minDate);
                 }
                 catch (error) {
                     // Silently handle min date parsing error
@@ -629,7 +680,7 @@ class TzDpContainerComponent {
             }
             if (this.data.dpConfig.maxDate) {
                 try {
-                    maxDate = this.parseZoneInstance(this.data.dpConfig.maxDate, this.data.dpConfig.format);
+                    maxDate = this.parseDateWithMultipleFormats(this.data.dpConfig.maxDate);
                 }
                 catch (error) {
                     // Silently handle max date parsing error
@@ -647,38 +698,42 @@ class TzDpContainerComponent {
                         isDisabledDay = maxDate.isBefore(date, "day");
                     }
                     const currentDateInstance = this.parseZoneInstance().year(currentYearNumber).month(month).date(currentDate);
-                    const isCurrentDay = currentDateInstance.format(this.data.dpConfig.format) === dayjs().format(this.data.dpConfig.format);
+                    // Only mark as current day if it's not disabled
+                    const isCurrentDay = !isDisabledDay && currentDateInstance.format(this.data.dpConfig.format) === dayjs().format(this.data.dpConfig.format);
                     let isSelectedDay = false;
-                    // Prioritize current selection over previously applied date
-                    if (this.localSelectedDateSignal() &&
-                        this.localSelectedDateSignal().date === currentDate &&
-                        this.localSelectedDateSignal().month === month &&
-                        this.localSelectedDateSignal().year === currentYearNumber) {
-                        isSelectedDay = true;
-                    }
-                    else if (this.data.date && !this.localSelectedDateSignal()) {
-                        // Only check previously applied date if no current selection
-                        try {
-                            if (this.data.dpConfig.enableTime) {
-                                const selectedDate = this.parseZoneInstance(this.data.date, this.data.dpConfig.format);
-                                if (selectedDate.isValid()) {
-                                    isSelectedDay = selectedDate.isSame(currentDateInstance, 'day');
-                                }
-                            }
-                            else {
-                                // For date-only format, compare the date parts only
-                                const selectedDate = this.parseZoneInstance(this.data.date, this.data.dpConfig.format);
-                                if (selectedDate.isValid()) {
-                                    isSelectedDay = selectedDate.isSame(currentDateInstance, 'day');
+                    // Only set selected day if the date is not disabled
+                    if (!isDisabledDay) {
+                        // Prioritize current selection over previously applied date
+                        if (this.localSelectedDateSignal() &&
+                            this.localSelectedDateSignal().date === currentDate &&
+                            this.localSelectedDateSignal().month === month &&
+                            this.localSelectedDateSignal().year === currentYearNumber) {
+                            isSelectedDay = true;
+                        }
+                        else if (this.data.date && !this.localSelectedDateSignal()) {
+                            // Only check previously applied date if no current selection
+                            try {
+                                if (this.data.dpConfig.enableTime) {
+                                    const selectedDate = this.parseDateWithMultipleFormats(this.data.date);
+                                    if (selectedDate.isValid()) {
+                                        isSelectedDay = selectedDate.isSame(currentDateInstance, 'day');
+                                    }
                                 }
                                 else {
-                                    // Fallback to string comparison if parsing fails
-                                    isSelectedDay = dateString === this.data.date;
+                                    // For date-only format, compare the date parts only
+                                    const selectedDate = this.parseDateWithMultipleFormats(this.data.date);
+                                    if (selectedDate.isValid()) {
+                                        isSelectedDay = selectedDate.isSame(currentDateInstance, 'day');
+                                    }
+                                    else {
+                                        // Fallback to string comparison if parsing fails
+                                        isSelectedDay = dateString === this.data.date;
+                                    }
                                 }
                             }
-                        }
-                        catch (error) {
-                            // Silently handle date comparison error
+                            catch (error) {
+                                // Silently handle date comparison error
+                            }
                         }
                     }
                     dates.push({
@@ -768,7 +823,7 @@ class TzDpContainerComponent {
                 // Force calendar re-render to show highlighting
                 this.currentMonthDatesSignal.set(this.generateDates(this.currentMonthNumberSignal(), this.currentYearNumberSignal()));
                 // Automatically apply when neither time nor apply button is enabled, otherwise wait for user action
-                if (!this.data.dpConfig.enableTime && !this.data.dpConfig.showApplyButton) {
+                if (!this.data.dpConfig.showApplyButton && !this.data.dpConfig.enableTime) {
                     this.applyDate(day);
                 }
             }
@@ -972,40 +1027,8 @@ class TzDatepickerDirective {
                 this.close();
             }
         }, { allowSignalWrites: true });
-        // Effect to sync selectedDate with input value
-        effect(() => {
-            const date = this.selectedDate();
-            const element = this.element.nativeElement;
-            // Clear the value if date is empty/null/undefined
-            if (!date) {
-                element.value = '';
-                if (this.control?.control) {
-                    this.control.control.setValue('', { emitEvent: false });
-                }
-                return;
-            }
-            // Set the value and trigger input event to ensure mis-input updates
-            element.value = date;
-            element.dispatchEvent(new Event('input', { bubbles: true }));
-            if (this.control?.control) {
-                this.control.control.setValue(date, { emitEvent: false });
-            }
-        });
-    }
-    ngOnInit() {
-        // Handle initial value
-        const element = this.element.nativeElement;
-        const initialValue = element.value || this.selectedDate();
-        if (initialValue) {
-            // Set initial value and trigger input event
-            element.value = initialValue;
-            element.dispatchEvent(new Event('input', { bubbles: true }));
-            // Update control if available
-            if (this.control?.control) {
-                this.control.control.setValue(initialValue, { emitEvent: false });
-            }
-        }
     }
+    ngOnInit() { }
     toggleDatePicker() {
         if (this.isOpen()) {
             this.close();