mis-crystal-design-system 18.1.7-signal-16-test → 18.1.7

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, signal, computed, effect, Component, Inject, HostListener, input, output, Injector, Directive, Self, Optional, NgModule } from '@angular/core';
+import { InjectionToken, signal, computed, Component, Inject, HostListener, input, output, Injector, Directive, Self, Optional, NgModule } from '@angular/core';
 import dayjs from 'dayjs';
 import timezone from 'dayjs/plugin/timezone';
 import utc from 'dayjs/plugin/utc';
@@ -252,6 +252,57 @@ dayjs.extend(customParseFormat);
 dayjs.extend(isSameOrAfter);
 dayjs.extend(isSameOrBefore);
 class TzDrpContainerComponent {
+    /**
+     * 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 = dayjs(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 = dayjs(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 = dayjs(dateString);
+            if (parsed.isValid()) {
+                return parsed;
+            }
+        }
+        catch (error) {
+            console.warn('Failed to parse date with any format:', dateString, error);
+        }
+        return dayjs('invalid');
+    }
     constructor(injectedData, toast) {
         this.injectedData = injectedData;
         this.toast = toast;
@@ -356,35 +407,10 @@ class TzDrpContainerComponent {
                 format: DATE_FORMAT
             };
         }
-        effect(() => {
-            const localSelectedDates = this.localSelectedDatesSignal();
-            let selectedStartDate;
-            if (localSelectedDates?.startDate) {
-                // Use the robust helper for parsing
-                selectedStartDate = this.parseDateWithMultipleFormats(localSelectedDates.startDate);
-            }
-            else {
-                selectedStartDate = dayjs('invalid');
-            }
-            if (selectedStartDate.isValid()) {
-                this.currentYearNumberSignal.set(selectedStartDate.year());
-                this.nextYearNumberSignal.set(selectedStartDate.add(1, "month").year());
-                this.currentMonthNumberSignal.set(selectedStartDate.get("month"));
-                this.nextMonthNumberSignal.set(selectedStartDate.add(1, "month").month());
-                const selectedEndDate = localSelectedDates?.endDate ? this.parseDateWithMultipleFormats(localSelectedDates.endDate) : null;
-                // Logic for next month being set by end date
-                if (selectedEndDate && selectedEndDate.isValid() && selectedEndDate.isAfter(selectedStartDate, 'month')) {
-                    this.nextMonthNumberSignal.set(selectedEndDate.month());
-                    this.nextYearNumberSignal.set(selectedEndDate.year());
-                }
-                // Update calendar dates to reflect the selected dates
-                this.currentMonthDatesSignal.set(this.generateDates(this.currentMonthNumberSignal(), this.currentYearNumberSignal()));
-                this.nextMonthDatesSignal.set(this.generateDates(this.nextMonthNumberSignal(), this.nextYearNumberSignal()));
-            }
-        }, { allowSignalWrites: true });
+        // Update calendar from initial selected dates
+        this.updateCalendarFromSelectedDates();
     }
     ngOnInit() {
-        console.log('ngOnInit');
         this.calculateMinMaxDays();
         this.initializeTimeValues();
         if (this.data()?.showPrevMonth && !this.isPreviousMonthDisabled) {
@@ -418,8 +444,8 @@ class TzDrpContainerComponent {
         }
         this.currentMonthNumberSignal.set(thisMonth.month());
         this.nextMonthNumberSignal.set(thisMonth.clone().add(1, "month").month());
-        this.currentMonthSignal.set(getMonth(this.currentMonthNumber()));
-        this.nextMonthSignal.set(getMonth(this.nextMonthNumber()));
+        this.currentMonthSignal.set(getMonth(this.currentMonthNumberSignal()));
+        this.nextMonthSignal.set(getMonth(this.nextMonthNumberSignal()));
         if (this.nextMonthNumberSignal() === 0 && direction === "PREVIOUS") {
             this.currentYearNumberSignal.set(this.currentYearNumberSignal() - 1);
         }
@@ -439,46 +465,36 @@ class TzDrpContainerComponent {
         this.nextMonthDatesSignal.set(this.generateDates(this.nextMonthNumber(), this.nextYearNumber()));
         this.calculateMinMaxDays();
     }
-    parseDateWithMultipleFormats(dateString) {
-        if (!dateString || dateString === 'Invalid Date' || dateString === 'undefined' || dateString === 'null') {
-            return dayjs('invalid');
-        }
-        const configuredFormat = this.data()?.dpConfig?.format;
-        if (configuredFormat) {
-            try {
-                const parsed = dayjs(dateString, configuredFormat);
-                if (parsed.isValid()) {
-                    return parsed;
-                }
-            }
-            catch (error) {
-                // Continue to fallback formats
-            }
+    /**
+     * Update calendar month/year based on selected dates
+     * This method is called whenever localSelectedDatesSignal changes to keep calendar in sync
+     */
+    updateCalendarFromSelectedDates() {
+        const localSelectedDates = this.localSelectedDatesSignal();
+        let selectedStartDate;
+        if (localSelectedDates?.startDate) {
+            selectedStartDate = this.parseDateWithMultipleFormats(localSelectedDates.startDate);
         }
-        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 = dayjs(dateString, format);
-                if (parsed.isValid()) {
-                    return parsed;
-                }
-            }
-            catch (error) {
-                // Continue to next format
-            }
+        else {
+            selectedStartDate = dayjs('invalid');
         }
-        try {
-            const parsed = dayjs(dateString);
-            if (parsed.isValid()) {
-                return parsed;
+        if (selectedStartDate.isValid()) {
+            this.currentYearNumberSignal.set(selectedStartDate.year());
+            this.nextYearNumberSignal.set(selectedStartDate.add(1, "month").year());
+            this.currentMonthNumberSignal.set(selectedStartDate.get("month"));
+            this.nextMonthNumberSignal.set(selectedStartDate.add(1, "month").month());
+            const selectedEndDate = localSelectedDates?.endDate ? this.parseDateWithMultipleFormats(localSelectedDates.endDate) : null;
+            if (selectedEndDate && selectedEndDate.isValid() && selectedEndDate.isAfter(selectedStartDate, 'month')) {
+                this.nextMonthNumberSignal.set(selectedEndDate.month());
+                this.nextYearNumberSignal.set(selectedEndDate.year());
             }
+            // Update month labels
+            this.currentMonthSignal.set(getMonth(this.currentMonthNumberSignal()));
+            this.nextMonthSignal.set(getMonth(this.nextMonthNumberSignal()));
+            // Update calendar dates to reflect the selected dates
+            this.currentMonthDatesSignal.set(this.generateDates(this.currentMonthNumberSignal(), this.currentYearNumberSignal()));
+            this.nextMonthDatesSignal.set(this.generateDates(this.nextMonthNumberSignal(), this.nextYearNumberSignal()));
         }
-        catch (error) {
-            console.warn('Failed to parse date with any format:', dateString, error);
-        }
-        return dayjs('invalid');
     }
     generateDates(month, currentYearNumber) {
         let dates = [];
@@ -530,13 +546,38 @@ class TzDrpContainerComponent {
             const isCurrentDay = this.dayjsInstance().year(currentYearNumber).month(month).date(currentDate).format(this.data().dpConfig.format) ===
                 this.dayjsInstance().format(this.data().dpConfig.format);
             // Extract date part for comparison (handle both date-only and datetime formats)
-            const startDateString = (this.localSelectedDatesSignal()?.startDate && typeof this.localSelectedDatesSignal()?.startDate === 'string')
-                ? this.localSelectedDatesSignal().startDate.split(' ')[0]
-                : this.localSelectedDatesSignal()?.startDate;
-            const endDateString = (this.localSelectedDatesSignal()?.endDate && typeof this.localSelectedDatesSignal()?.endDate === 'string')
-                ? this.localSelectedDatesSignal().endDate.split(' ')[0]
-                : this.localSelectedDatesSignal()?.endDate;
-            // Use the custom format for comparison instead of hardcoded DD/MM/YYYY
+            let startDateString = this.localSelectedDatesSignal()?.startDate;
+            let endDateString = this.localSelectedDatesSignal()?.endDate;
+            // Only extract date part if the format contains time components
+            if (this.data().dpConfig.format.includes('HH') || this.data().dpConfig.format.includes('mm') || this.data().dpConfig.format.includes('A')) {
+                // For datetime formats, we need to extract just the date part
+                // Try to parse the full string and then format it as date-only for comparison
+                if (startDateString) {
+                    const parsedStart = this.parseDateWithMultipleFormats(startDateString);
+                    if (parsedStart.isValid()) {
+                        // Extract date part by finding the time boundary - handle spaces in date part
+                        const timeStartMatch = this.data().dpConfig.format.match(/(\s+)(HH|mm|ss|A|a)/);
+                        if (timeStartMatch) {
+                            const timeStartIndex = this.data().dpConfig.format.indexOf(timeStartMatch[0]);
+                            const dateOnlyFormat = this.data().dpConfig.format.substring(0, timeStartIndex);
+                            startDateString = parsedStart.format(dateOnlyFormat);
+                        }
+                    }
+                }
+                if (endDateString) {
+                    const parsedEnd = this.parseDateWithMultipleFormats(endDateString);
+                    if (parsedEnd.isValid()) {
+                        // Extract date part by finding the time boundary - handle spaces in date part
+                        const timeStartMatch = this.data().dpConfig.format.match(/(\s+)(HH|mm|ss|A|a)/);
+                        if (timeStartMatch) {
+                            const timeStartIndex = this.data().dpConfig.format.indexOf(timeStartMatch[0]);
+                            const dateOnlyFormat = this.data().dpConfig.format.substring(0, timeStartIndex);
+                            endDateString = parsedEnd.format(dateOnlyFormat);
+                        }
+                    }
+                }
+            }
+            // Parse the selected dates to get proper dayjs instances for comparison
             const startDateParsed = startDateString ? this.parseDateWithMultipleFormats(startDateString) : null;
             const endDateParsed = endDateString ? this.parseDateWithMultipleFormats(endDateString) : null;
             const isSelectedStartDay = !isDisabledDay &&
@@ -547,7 +588,7 @@ class TzDrpContainerComponent {
                 endDateParsed &&
                 endDateParsed.isValid() &&
                 date.isSame(endDateParsed, 'day');
-            // For range calculation, parse dates properly using custom format
+            // For range calculation, use the already parsed dates
             const isAfterSelectedStartDate = startDateParsed ? this.dayjsInstance(date).isAfter(startDateParsed, "day") : false;
             const isBeforeSelectedEndDate = endDateParsed ? this.dayjsInstance(date).isBefore(endDateParsed, "day") : false;
             const inRangeDay = startDateParsed && endDateParsed &&
@@ -571,93 +612,143 @@ class TzDrpContainerComponent {
         return dates;
     }
     selectDay(from, day) {
-        if (day.date <= 0) {
+        if (day.date <= 0)
             return;
-        }
         if (!day.isDisabledDay) {
             this.selectedItemLabelSignal.set(this.CUSTOM_RANGE_LABEL);
-            // Calculate the day being selected
-            const dayjsDay = dayjs()
-                .year(from === "LEFT" ? this.currentYearNumberSignal() : this.nextYearNumberSignal())
-                .month(from === "LEFT" ? this.currentMonthNumberSignal() : this.nextMonthNumberSignal())
-                .date(day.date);
-            let formattedDate = dayjsDay.format(this.data().dpConfig.format);
-            this.localSelectedDatesSignal.update(current => {
-                let updatedDates = { ...current };
-                // Start Date for comparison (using helper for robust check)
-                const startDate = current.startDate ? this.parseDateWithMultipleFormats(current.startDate) : null;
-                // FIX 4: Append time if enabled
-                if (this.data().dpConfig.enableTime === true) {
-                    // The time is set to NOW, as per original non-signal component's logic
-                    formattedDate = this.appendCurrentTime(dayjsDay);
-                }
-                if (this.selectionStarted()) {
-                    // If the selected date is the same as the start date (New in your previous signal code, but valid)
-                    if (startDate && dayjsDay.isSame(startDate, "day")) {
-                        this.selectionStartedSignal.set(false);
-                        this.isDatesValidSignal.set(true); // Manually setting validity (can be computed later)
-                        return {
-                            startDate: formattedDate,
-                            endDate: formattedDate,
-                            selectedRangeLabel: this.CUSTOM_RANGE_LABEL
-                        };
-                    }
-                    // If the selected date is before the start date, make it the new start date
-                    if (startDate && dayjsDay.isBefore(startDate, "day")) {
-                        // Start selection over
-                        this.selectionStartedSignal.set(true);
-                        this.isDatesValidSignal.set(false);
-                        return {
-                            startDate: formattedDate,
-                            endDate: null,
-                            selectedRangeLabel: this.CUSTOM_RANGE_LABEL
-                        };
+            if (this.selectionStartedSignal()) {
+                const dayjsDay = dayjs()
+                    .year(from === "LEFT" ? this.currentYearNumberSignal() : this.nextYearNumberSignal())
+                    .month(from === "LEFT" ? this.currentMonthNumberSignal() : this.nextMonthNumberSignal())
+                    .date(day.date);
+                // Extract date part from existing start date for comparison
+                let startDateString = this.localSelectedDatesSignal().startDate;
+                // Only extract date part if the format contains time components
+                if (this.data().dpConfig.format.includes('HH') || this.data().dpConfig.format.includes('mm') || this.data().dpConfig.format.includes('A')) {
+                    // For datetime formats, we need to extract just the date part
+                    // Try to parse the full string and then format it as date-only for comparison
+                    if (startDateString) {
+                        const parsedStart = this.parseDateWithMultipleFormats(startDateString);
+                        if (parsedStart.isValid()) {
+                            // Extract date part by finding the time boundary - handle spaces in date part
+                            const timeStartMatch = this.data().dpConfig.format.match(/(\s+)(HH|mm|ss|A|a)/);
+                            if (timeStartMatch) {
+                                const timeStartIndex = this.data().dpConfig.format.indexOf(timeStartMatch[0]);
+                                const dateOnlyFormat = this.data().dpConfig.format.substring(0, timeStartIndex);
+                                startDateString = parsedStart.format(dateOnlyFormat);
+                            }
+                        }
                     }
-                    // End selection
-                    this.selectionStartedSignal.set(false);
-                    this.isDatesValidSignal.set(true);
-                    return {
-                        ...current,
-                        endDate: formattedDate,
-                        selectedRangeLabel: this.CUSTOM_RANGE_LABEL
-                    };
                 }
-                else {
-                    // Start selection
-                    this.selectionStartedSignal.set(true);
-                    this.isDatesValidSignal.set(false);
-                    return {
+                const startDate = startDateString ? this.parseDateWithMultipleFormats(startDateString) : null;
+                // If the selected date is before the start date, make it the new start date
+                if (startDate && dayjsDay.isBefore(startDate, "day")) {
+                    let formattedDate = dayjsDay.format(this.data().dpConfig.format);
+                    // If time is enabled, append current time to the date
+                    if (this.data().dpConfig.enableTime === true) {
+                        const now = dayjs();
+                        // Extract date part from the configured format - handle spaces in date part
+                        // Look for the pattern where time starts (HH, mm, ss, A, a)
+                        const timeStartMatch = this.data().dpConfig.format.match(/(\s+)(HH|mm|ss|A|a)/);
+                        if (timeStartMatch) {
+                            const timeStartIndex = this.data().dpConfig.format.indexOf(timeStartMatch[0]);
+                            const dateOnlyFormat = this.data().dpConfig.format.substring(0, timeStartIndex);
+                            const timeOnlyFormat = this.data().dpConfig.format.substring(timeStartIndex + timeStartMatch[1].length);
+                            const dateString = dayjsDay.format(dateOnlyFormat);
+                            const timeString = now.format(timeOnlyFormat);
+                            formattedDate = dateString + timeStartMatch[1] + timeString;
+                        }
+                        else {
+                            // Fallback if no time pattern found
+                            formattedDate = dayjsDay.format(this.data().dpConfig.format);
+                        }
+                    }
+                    this.localSelectedDatesSignal.set({
                         startDate: formattedDate,
                         endDate: null,
                         selectedRangeLabel: this.CUSTOM_RANGE_LABEL
-                    };
+                    });
+                    this.updateCalendarFromSelectedDates();
+                    return;
                 }
-            });
-            // The date arrays are COMPUTED, so no need for manual set()
-            this.isDatesValidSignal.set(!!(this.localSelectedDatesSignal().startDate && this.localSelectedDatesSignal().endDate));
+                this.selectionStartedSignal.set(false);
+                let formattedEndDate = dayjsDay.format(this.data().dpConfig.format);
+                // If time is enabled, append current time to the date
+                if (this.data().dpConfig.enableTime === true) {
+                    const now = dayjs();
+                    // Extract date part from the configured format - handle spaces in date part
+                    // Look for the pattern where time starts (HH, mm, ss, A, a)
+                    const timeStartMatch = this.data().dpConfig.format.match(/(\s+)(HH|mm|ss|A|a)/);
+                    if (timeStartMatch) {
+                        const timeStartIndex = this.data().dpConfig.format.indexOf(timeStartMatch[0]);
+                        const dateOnlyFormat = this.data().dpConfig.format.substring(0, timeStartIndex);
+                        const timeOnlyFormat = this.data().dpConfig.format.substring(timeStartIndex + timeStartMatch[1].length);
+                        const dateString = dayjsDay.format(dateOnlyFormat);
+                        const timeString = now.format(timeOnlyFormat);
+                        formattedEndDate = dateString + timeStartMatch[1] + timeString;
+                    }
+                    else {
+                        // Fallback if no time pattern found
+                        formattedEndDate = dayjsDay.format(this.data().dpConfig.format);
+                    }
+                }
+                this.localSelectedDatesSignal.set({
+                    ...this.localSelectedDatesSignal(),
+                    endDate: formattedEndDate,
+                    selectedRangeLabel: this.CUSTOM_RANGE_LABEL
+                });
+                this.updateCalendarFromSelectedDates();
+            }
+            else {
+                this.selectionStartedSignal.set(true);
+                let formattedStartDate = dayjs()
+                    .year(from === "LEFT" ? this.currentYearNumberSignal() : this.nextYearNumberSignal())
+                    .month(from === "LEFT" ? this.currentMonthNumberSignal() : this.nextMonthNumberSignal())
+                    .date(day.date)
+                    .format(this.data().dpConfig.format);
+                // If time is enabled, append current time to the date
+                if (this.data().dpConfig.enableTime === true) {
+                    const now = dayjs();
+                    // Extract date part from the configured format - handle spaces in date part
+                    // Look for the pattern where time starts (HH, mm, ss, A, a)
+                    const timeStartMatch = this.data().dpConfig.format.match(/(\s+)(HH|mm|ss|A|a)/);
+                    if (timeStartMatch) {
+                        const timeStartIndex = this.data().dpConfig.format.indexOf(timeStartMatch[0]);
+                        const dateOnlyFormat = this.data().dpConfig.format.substring(0, timeStartIndex);
+                        const timeOnlyFormat = this.data().dpConfig.format.substring(timeStartIndex + timeStartMatch[1].length);
+                        const dateString = dayjs()
+                            .year(from === "LEFT" ? this.currentYearNumberSignal() : this.nextYearNumberSignal())
+                            .month(from === "LEFT" ? this.currentMonthNumberSignal() : this.nextMonthNumberSignal())
+                            .date(day.date)
+                            .format(dateOnlyFormat);
+                        const timeString = now.format(timeOnlyFormat);
+                        formattedStartDate = dateString + timeStartMatch[1] + timeString;
+                    }
+                    else {
+                        // Fallback if no time pattern found
+                        formattedStartDate = dayjs()
+                            .year(from === "LEFT" ? this.currentYearNumberSignal() : this.nextYearNumberSignal())
+                            .month(from === "LEFT" ? this.currentMonthNumberSignal() : this.nextMonthNumberSignal())
+                            .date(day.date)
+                            .format(this.data().dpConfig.format);
+                    }
+                }
+                this.localSelectedDatesSignal.set({
+                    startDate: formattedStartDate,
+                    endDate: null,
+                    selectedRangeLabel: this.CUSTOM_RANGE_LABEL
+                });
+                this.updateCalendarFromSelectedDates();
+            }
+            this.isDatesValidSignal.set(false);
+            if (this.localSelectedDatesSignal().startDate && this.localSelectedDatesSignal().endDate) {
+                this.isDatesValidSignal.set(true);
+            }
         }
         if (day.toastMessage) {
             this.toast.displayMsg(day.toastMessage, 4000);
         }
     }
-    // Helper method to append current time (replicates original selectDay complex formatting logic)
-    appendCurrentTime(date) {
-        if (!this.data().dpConfig.enableTime)
-            return date.format(this.data().dpConfig.format);
-        // This complex formatting logic must be replicated exactly for backward compatibility
-        const now = dayjs();
-        const timeStartMatch = this.data().dpConfig.format.match(/(\s+)(HH|mm|ss|A|a)/);
-        if (timeStartMatch) {
-            const timeStartIndex = this.data().dpConfig.format.indexOf(timeStartMatch[0]);
-            const dateOnlyFormat = this.data().dpConfig.format.substring(0, timeStartIndex);
-            const timeOnlyFormat = this.data().dpConfig.format.substring(timeStartIndex + timeStartMatch[1].length);
-            const dateString = date.format(dateOnlyFormat);
-            const timeString = now.format(timeOnlyFormat);
-            return dateString + timeStartMatch[1] + timeString;
-        }
-        // Fallback if no time pattern found
-        return date.format(this.data().dpConfig.format);
-    }
     selectRange(item) {
         if (!item)
             return;
@@ -665,11 +756,9 @@ class TzDrpContainerComponent {
         let endDate = this.dayjsInstance(item.value[1]);
         const startDateStr = startDate.format(this.data().dpConfig.format);
         const endDateStr = endDate.format(this.data().dpConfig.format);
-        // Note: The original datesDisabled check uses the custom dayjsInstance, which is good.
         const isAnyDateDisabled = this.data().datesDisabled.some((date) => this.dayjsInstance(date, this.data().dpConfig.format).isBetween(startDateStr, endDateStr, null, '[]'));
-        // FIX 4: Use robust parsing for minDate/maxDate comparison
-        const minDate = !!this.data().dpConfig.minDate ? this.parseDateWithMultipleFormats(this.data().dpConfig.minDate) : dayjs('invalid');
-        const maxDate = !!this.data().dpConfig.maxDate ? this.parseDateWithMultipleFormats(this.data().dpConfig.maxDate) : dayjs('invalid');
+        const minDate = !!this.data().dpConfig.minDate ? this.dayjsInstance(this.data().dpConfig.minDate, this.data().dpConfig.format) : dayjs('invalid');
+        const maxDate = !!this.data().dpConfig.maxDate ? this.dayjsInstance(this.data().dpConfig.maxDate, this.data().dpConfig.format) : dayjs('invalid');
         const isWithinLimits = (!minDate.isValid() || !startDate.isBefore(minDate, "day")) &&
             (!maxDate.isValid() || !endDate.isAfter(maxDate, "day"));
         if (!isWithinLimits || isAnyDateDisabled) {
@@ -679,7 +768,6 @@ class TzDrpContainerComponent {
         this.selectedItemLabelSignal.set(item.label);
         this.currentMonthNumberSignal.set(startDate.month());
         this.currentYearNumberSignal.set(startDate.year());
-        // Month/Year rollover logic is kept as is to match original functionality
         if (this.currentMonthNumberSignal() === 11) {
             this.nextMonthNumberSignal.set(0);
             this.nextYearNumberSignal.set(this.currentYearNumberSignal() + 1);
@@ -693,8 +781,10 @@ class TzDrpContainerComponent {
             endDate: endDateStr,
             selectedRangeLabel: item.label
         });
-        // The month/date computed properties (currentMonth, currentMonthDates, etc.) 
-        // update automatically now.
+        this.currentMonthSignal.set(getMonth(this.currentMonthNumberSignal()));
+        this.nextMonthSignal.set(getMonth(this.nextMonthNumberSignal()));
+        this.currentMonthDatesSignal.set(this.generateDates(this.currentMonthNumberSignal(), this.currentYearNumberSignal()));
+        this.nextMonthDatesSignal.set(this.generateDates(this.nextMonthNumberSignal(), this.nextYearNumberSignal()));
         this.isDatesValidSignal.set(!!(this.localSelectedDatesSignal().startDate && this.localSelectedDatesSignal().endDate));
     }
     resetRange() {
@@ -709,13 +799,11 @@ class TzDrpContainerComponent {
         this.currentMonthDatesSignal.set(this.generateDates(this.currentMonthNumber(), this.currentYearNumber()));
         this.nextMonthDatesSignal.set(this.generateDates(this.nextMonthNumber(), this.nextYearNumber()));
     }
-    // TzDrpContainerComponent (Signal-Migrated)
     applyDates() {
         // If time is enabled, append time to the dates before applying
         if (this.data().dpConfig.enableTime === true) {
             let startTime;
             let endTime;
-            // Use signal accessors
             if (this.is12HourFormat()) {
                 startTime = this.formatTime(this.startHour(), this.startMinute(), this.startAmPm());
                 endTime = this.formatTime(this.endHour(), this.endMinute(), this.endAmPm());
@@ -724,41 +812,36 @@ class TzDrpContainerComponent {
                 startTime = this.formatTime(this.startHour24(), this.startMinute(), '');
                 endTime = this.formatTime(this.endHour24(), this.endMinute(), '');
             }
+            // Extract only the date part (before any existing time) and append the selected time
             const localDates = this.localSelectedDatesSignal();
             let startDateOnly = localDates.startDate;
             let endDateOnly = localDates.endDate;
-            // FIX 4: Use robust parsing/formatting for date part extraction
-            if (startDateOnly) {
-                const parsedStart = this.parseDateWithMultipleFormats(startDateOnly);
-                // This is a complex date format extraction in the original, simplified here 
-                // by taking the date part only (assuming time is always separated by space)
-                // For true fidelity, the original logic for date part extraction with time must be preserved.
-                if (parsedStart.isValid()) {
-                    // Preserve original date formatting logic: extract only the date part 
-                    // using the configured format elements BEFORE the time components.
-                    const timeStartMatch = this.data().dpConfig.format.match(/(\s+)(HH|mm|ss|A|a)/);
-                    if (timeStartMatch) {
-                        const timeStartIndex = this.data().dpConfig.format.indexOf(timeStartMatch[0]);
-                        const dateOnlyFormat = this.data().dpConfig.format.substring(0, timeStartIndex);
-                        startDateOnly = parsedStart.format(dateOnlyFormat);
-                    }
-                    else {
-                        // Fallback to splitting if format is date-only
-                        startDateOnly = (typeof startDateOnly === 'string') ? startDateOnly.split(' ')[0] : startDateOnly;
+            // Only extract date part if the format contains time components
+            if (this.data().dpConfig.format.includes('HH') || this.data().dpConfig.format.includes('mm') || this.data().dpConfig.format.includes('A')) {
+                // For datetime formats, we need to extract just the date part
+                // Try to parse the full string and then format it as date-only for comparison
+                if (startDateOnly) {
+                    const parsedStart = this.parseDateWithMultipleFormats(startDateOnly);
+                    if (parsedStart.isValid()) {
+                        // Extract date part by finding the time boundary - handle spaces in date part
+                        const timeStartMatch = this.data().dpConfig.format.match(/(\s+)(HH|mm|ss|A|a)/);
+                        if (timeStartMatch) {
+                            const timeStartIndex = this.data().dpConfig.format.indexOf(timeStartMatch[0]);
+                            const dateOnlyFormat = this.data().dpConfig.format.substring(0, timeStartIndex);
+                            startDateOnly = parsedStart.format(dateOnlyFormat);
+                        }
                     }
                 }
-            }
-            if (endDateOnly) {
-                const parsedEnd = this.parseDateWithMultipleFormats(endDateOnly);
-                if (parsedEnd.isValid()) {
-                    const timeStartMatch = this.data().dpConfig.format.match(/(\s+)(HH|mm|ss|A|a)/);
-                    if (timeStartMatch) {
-                        const timeStartIndex = this.data().dpConfig.format.indexOf(timeStartMatch[0]);
-                        const dateOnlyFormat = this.data().dpConfig.format.substring(0, timeStartIndex);
-                        endDateOnly = parsedEnd.format(dateOnlyFormat);
-                    }
-                    else {
-                        endDateOnly = (typeof endDateOnly === 'string') ? endDateOnly.split(' ')[0] : endDateOnly;
+                if (endDateOnly) {
+                    const parsedEnd = this.parseDateWithMultipleFormats(endDateOnly);
+                    if (parsedEnd.isValid()) {
+                        // Extract date part by finding the time boundary - handle spaces in date part
+                        const timeStartMatch = this.data().dpConfig.format.match(/(\s+)(HH|mm|ss|A|a)/);
+                        if (timeStartMatch) {
+                            const timeStartIndex = this.data().dpConfig.format.indexOf(timeStartMatch[0]);
+                            const dateOnlyFormat = this.data().dpConfig.format.substring(0, timeStartIndex);
+                            endDateOnly = parsedEnd.format(dateOnlyFormat);
+                        }
                     }
                 }
             }
@@ -1198,16 +1281,19 @@ class TzDaterangepickerDirective {
             backdropClass: "cdk-overlay-transparent-backdrop"
         });
         this.overlayRef = this.overlay.create(config);
+        // Get current values at the time of opening
+        const currentSelectedDates = this.selectedDates();
+        const currentSelectedRangeLabel = this.selectedRangeLabel();
         const tempRef = new ComponentPortal(TzDrpContainerComponent, this.viewContainerRef, Injector.create({
             providers: [
                 {
                     provide: CONTAINER_DATA,
                     useValue: {
                         messages: this.dateMessages(),
-                        dates: this.selectedDates(),
+                        dates: currentSelectedDates,
                         dpConfig: this.dpConfig(),
                         datesDisabled: this.datesDisabled(),
-                        selectedRangeLabel: this.selectedRangeLabel(),
+                        selectedRangeLabel: currentSelectedRangeLabel,
                         dateChange: this.applyDate.bind(this),
                         close: this.close.bind(this)
                     }