@libs-ui/components-datetime-picker 0.2.241 → 0.2.243

package/fesm2022/libs-ui-components-datetime-picker.mjs

@@ -2,13 +2,13 @@ import * as i0 from '@angular/core';
 import { signal, computed, input, model, output, inject, viewChild, effect, untracked, ChangeDetectionStrategy, Component } from '@angular/core';
 import { LibsUiComponentsLabelComponent } from '@libs-ui/components-label';
 import { LibsUiComponentsPopoverComponent } from '@libs-ui/components-popover';
-import { UtilsLanguageConstants, get, UtilsCache, UtilsHttpParamsRequestInstance, getDayjs, isEmpty, set, ERROR_MESSAGE_EMPTY_VALID } from '@libs-ui/utils';
+import { UtilsLanguageConstants, get, UtilsCache, getDayjs, UtilsHttpParamsRequestInstance, isEmpty, set, ERROR_MESSAGE_EMPTY_VALID } from '@libs-ui/utils';
 import * as i1 from '@ngx-translate/core';
 import { TranslateService, TranslateModule } from '@ngx-translate/core';
-import dayjs from 'dayjs';
 import { LibsUiComponentsButtonsButtonComponent } from '@libs-ui/components-buttons-button';
 import { LibsUiComponentsDropdownComponent } from '@libs-ui/components-dropdown';
 import { LibsUiComponentsInputsInputComponent } from '@libs-ui/components-inputs-input';
+import dayjs from 'dayjs';
 import isoWeek from 'dayjs/plugin/isoWeek';
 import { returnListObject, returnDetailObject } from '@libs-ui/services-http-request';
 
@@ -53,13 +53,13 @@ const defaultLocaleConfig = () => {
 };
 const getDateRangeDefault = () => {
     return {
-        today: [dayjs().hour(0).minute(0).second(0).millisecond(0), dayjs().hour(23).minute(59).second(59)],
-        yesterday: [dayjs().subtract(1, 'days').hour(0).minute(0).second(0).millisecond(0), dayjs().subtract(1, 'days').hour(23).minute(59).second(59)],
-        _7days_ago: [dayjs().subtract(6, 'days').hour(0).second(0).minute(0).millisecond(0), dayjs().hour(23).minute(59).second(59)],
-        _30days_ago: [dayjs().subtract(29, 'days').hour(0).second(0).minute(0).millisecond(0), dayjs().hour(23).minute(59).second(59)],
-        this_month: [dayjs().startOf('month'), dayjs().endOf('month')],
-        last_month: [dayjs().subtract(1, 'month').startOf('month'), dayjs().subtract(1, 'month').endOf('month')],
-        _3months_ago: [dayjs().subtract(89, 'days').hour(0).second(0).minute(0).millisecond(0), dayjs().hour(23).minute(59).second(59)],
+        today: [getDayjs().hour(0).minute(0).second(0).millisecond(0), getDayjs().hour(23).minute(59).second(59)],
+        yesterday: [getDayjs().subtract(1, 'days').hour(0).minute(0).second(0).millisecond(0), getDayjs().subtract(1, 'days').hour(23).minute(59).second(59)],
+        _7days_ago: [getDayjs().subtract(6, 'days').hour(0).second(0).minute(0).millisecond(0), getDayjs().hour(23).minute(59).second(59)],
+        _30days_ago: [getDayjs().subtract(29, 'days').hour(0).second(0).minute(0).millisecond(0), getDayjs().hour(23).minute(59).second(59)],
+        this_month: [getDayjs().startOf('month'), getDayjs().endOf('month')],
+        last_month: [getDayjs().subtract(1, 'month').startOf('month'), getDayjs().subtract(1, 'month').endOf('month')],
+        _3months_ago: [getDayjs().subtract(89, 'days').hour(0).second(0).minute(0).millisecond(0), getDayjs().hour(23).minute(59).second(59)],
     };
 };
 
@@ -196,7 +196,7 @@ const getYearsDetailById = (listOfYears = []) => {
 };
 
 const DEFAULT_MIN_YEAR = 1945;
-const DEFAULT_MAX_YEAR = (getDayjs()?.year() || 2195) + 5;
+const DEFAULT_MAX_YEAR = getDayjs().year() + 5;
 
 var SideEnum;
 (function (SideEnum) {
@@ -213,7 +213,7 @@ class LibsUiComponentsDatetimePickerCustomRangesCalendarComponent {
     calendarVariables = signal({ left: signal({}), right: signal({}) });
     timepickerVariables = signal({ left: signal({ selectedHour: 0, selectedMinute: 0 }), right: signal({ selectedHour: 23, selectedMinute: 59 }) });
     disableMonth = signal({ left: signal([]), right: signal([]) });
-    today = signal(dayjs());
+    today = signal(getDayjs());
     listKeyFromSelected = signal({ month: undefined, year: undefined });
     listKeyToSelected = signal({ month: undefined, year: undefined });
     checkShowListDropdown = signal({});
@@ -259,15 +259,15 @@ class LibsUiComponentsDatetimePickerCustomRangesCalendarComponent {
     autoApply = input(false);
     hasSecondPicker = input(false);
     showRangeLabelOnInput = input(undefined);
-    startDate = model(dayjs().startOf('day'));
-    endDate = model(dayjs().endOf('day'));
+    startDate = model(getDayjs().startOf('day'));
+    endDate = model(getDayjs().endOf('day'));
     minDate = input(undefined, { transform: this.transformMinMaxDate.bind(this) });
     maxDate = input(undefined, { transform: this.transformMinMaxDate.bind(this) });
     listYearHiddenInputSearch = input(true, { transform: (value) => value ?? true });
     /** OUTPUT */
     outChangStageFlagMouse = output();
-    // readonly outStartDateChanged = output<{ startDate: dayjs.Dayjs | undefined }>();
-    // readonly outEndDateChanged = output<{ endDate: dayjs.Dayjs | undefined }>();
+    // readonly outStartDateChanged = output<{ startDate: Dayjs | undefined }>();
+    // readonly outEndDateChanged = output<{ endDate: Dayjs | undefined }>();
     outPickerDate = output();
     // readonly outRangeClicked: EventEmitter<IRangesClicked> = new EventEmitter();
     outCancel = output();
@@ -279,23 +279,23 @@ class LibsUiComponentsDatetimePickerCustomRangesCalendarComponent {
     constructor() {
         this.listMonthsConfig.set(getMonthsListConfig(this.translate));
         effect(() => {
-            const oldStart = this.startDate()?.clone();
-            const oldEnd = this.endDate()?.clone();
+            const oldStart = getDayjs({ date: this.startDate()?.clone() });
+            const oldEnd = getDayjs({ date: this.endDate()?.clone() });
             untracked(() => {
                 this.oldDate.set({ start: oldStart, end: oldEnd });
             });
         });
     }
     ngOnInit() {
-        const startDate = this.startDate()?.clone();
-        const endDate = this.endDate()?.clone();
+        const startDate = getDayjs({ date: this.startDate()?.clone() });
+        const endDate = getDayjs({ date: this.endDate()?.clone() });
         this.splitPickerDate.update(current => {
             current.start.update(sideCurrent => {
-                sideCurrent.day = (startDate ?? dayjs().startOf('day')).date();
+                sideCurrent.day = (startDate ?? getDayjs().startOf('day')).date();
                 return sideCurrent;
             });
             current.end.update(sideCurrent => {
-                sideCurrent.day = (endDate ?? dayjs().endOf('day')).date();
+                sideCurrent.day = (endDate ?? getDayjs().endOf('day')).date();
                 return sideCurrent;
             });
             return current;
@@ -337,8 +337,8 @@ class LibsUiComponentsDatetimePickerCustomRangesCalendarComponent {
         // this.outFunctionsControl.emit({ buildDefaultRange: this.buildDefaultRange.bind(this), applyToSelect: this.applyToSelect.bind(this) })
     }
     buildConfigYear(side, startYear) {
-        const minDate = this.minDate();
-        const maxDate = this.maxDate();
+        const minDate = getDayjs({ date: this.minDate() });
+        const maxDate = getDayjs({ date: this.maxDate() });
         const listLeftYear = [];
         const listRightYear = [];
         if (side === SideEnum.left) {
@@ -355,7 +355,7 @@ class LibsUiComponentsDatetimePickerCustomRangesCalendarComponent {
             return;
         }
         const start = maxDate?.year() ?? DEFAULT_MAX_YEAR;
-        const end = startYear ?? minDate?.year() ?? dayjs().year();
+        const end = startYear ?? minDate?.year() ?? getDayjs().year();
         for (let i = start; i >= end; i--) {
             listRightYear.push({
                 id: i,
@@ -369,23 +369,24 @@ class LibsUiComponentsDatetimePickerCustomRangesCalendarComponent {
         this.outChangStageFlagMouse.emit(flagMouse);
     }
     updateStartEndDate(date) {
-        if ((this.endDate() || date.isBefore(this.startDate(), 'day'))) {
+        date = getDayjs({ date });
+        if ((this.endDate() || date.isBefore(getDayjs({ date: this.startDate() }), 'day'))) {
             if (this.hasTimePicker()) {
                 date = this.getDateWithTime(date, SideEnum.left);
             }
             this.endDate.set(undefined);
-            this.setStartDate(date.clone());
+            this.setStartDate(getDayjs({ date: date.clone() }));
             return;
         }
-        if (!this.endDate() && this.startDate() && date.isBefore(this.startDate())) {
-            this.setEndDate(this.startDate()?.clone());
+        if (!this.endDate() && this.startDate() && date.isBefore(getDayjs({ date: this.startDate() }))) {
+            this.setEndDate(getDayjs({ date: this.startDate()?.clone() }));
             return;
         }
         if (this.hasTimePicker()) {
-            date = this.getDateWithTime(date, SideEnum.right);
+            date = getDayjs({ date: this.getDateWithTime(date, SideEnum.right) });
         }
-        if (!date.isBefore(this.startDate(), 'day')) {
-            this.setEndDate(date.clone());
+        if (!date.isBefore(getDayjs({ date: this.startDate() }), 'day')) {
+            this.setEndDate(getDayjs({ date: date.clone() }));
         }
         if (this.autoApply()) {
             this.calculateSelectedLabel();
@@ -418,23 +419,23 @@ class LibsUiComponentsDatetimePickerCustomRangesCalendarComponent {
             return;
         }
         if (typeof startDate === 'string') {
-            this.startDate.set(dayjs(startDate, this.dateOptions().format));
+            this.startDate.set(getDayjs({ date: dayjs(startDate, this.dateOptions().format), returnDayjsIfConfigDateNotExist: true }));
         }
         if (typeof startDate === 'object') {
             this.pickingDate.set(true);
-            this.startDate.set(dayjs(startDate));
+            this.startDate.set(getDayjs({ date: startDate, returnDayjsIfConfigDateNotExist: true }));
         }
         if (!this.hasTimePicker()) {
             this.pickingDate.set(true);
-            this.startDate.set(this.startDate()?.startOf('day'));
+            this.startDate.set(getDayjs({ date: this.startDate()?.startOf('day') }));
         }
         this.setStartDateInTimePicker();
         if (this.minDate() && this.startDate()?.isBefore(this.minDate())) {
-            this.startDate.set(this.minDate()?.clone());
+            this.startDate.set(getDayjs({ date: this.minDate() })?.clone());
             this.setStartDateInTimePicker();
         }
         if (this.maxDate() && this.startDate()?.isAfter(this.maxDate())) {
-            this.startDate.set(this.maxDate().clone());
+            this.startDate.set(getDayjs({ date: this.maxDate() })?.clone());
             this.setStartDateInTimePicker();
         }
         if (!this.isShown()) {
@@ -457,11 +458,11 @@ class LibsUiComponentsDatetimePickerCustomRangesCalendarComponent {
     }
     setEndDate(endDate) {
         if (typeof endDate === 'string') {
-            this.endDate.set(dayjs(endDate, this.dateOptions().format));
+            this.endDate.set(getDayjs({ date: dayjs(endDate, this.dateOptions().format), returnDayjsIfConfigDateNotExist: true }));
         }
         if (typeof endDate === 'object') {
             this.pickingDate.set(false);
-            this.endDate.set(dayjs(endDate));
+            this.endDate.set(getDayjs({ date: dayjs(endDate), returnDayjsIfConfigDateNotExist: true }));
         }
         if (!this.endDate() || !this.startDate()) {
             return this.updateMonthsInView();
@@ -483,7 +484,7 @@ class LibsUiComponentsDatetimePickerCustomRangesCalendarComponent {
             this.endDate.set(this.startDate()?.clone());
         }
         if (this.maxDate() && this.endDate()?.isAfter(this.maxDate())) {
-            this.endDate.set(this.maxDate()?.clone());
+            this.endDate.set(getDayjs({ date: (this.maxDate()) })?.clone());
         }
         // this.outEndDateChanged.emit({ endDate: this.endDate() });
         this.updateMonthsInView();
@@ -500,8 +501,8 @@ class LibsUiComponentsDatetimePickerCustomRangesCalendarComponent {
         this.renderCalendar(SideEnum.right);
     }
     getDisable(type) {
-        const minDate = this.minDate();
-        const maxDate = this.maxDate();
+        const minDate = getDayjs({ date: this.minDate() });
+        const maxDate = getDayjs({ date: this.maxDate() });
         if (type === 'left') {
             this.disableMonth().left.set([]);
             if (minDate?.year() === this.listKeyFromSelected().year) {
@@ -723,7 +724,7 @@ class LibsUiComponentsDatetimePickerCustomRangesCalendarComponent {
     }
     updateMonthSelect(event, type) {
         const side = type.includes(SideEnum.left) ? SideEnum.left : SideEnum.right;
-        const year = this.calendarVariables()[side]().dropdowns?.()?.currentYear || dayjs().year();
+        const year = this.calendarVariables()[side]().dropdowns?.()?.currentYear || getDayjs().year();
         const month = Number(event.key) - 1;
         if (side === SideEnum.left) {
             if (this.isSelectedData().leftmonth) {
@@ -840,7 +841,7 @@ class LibsUiComponentsDatetimePickerCustomRangesCalendarComponent {
             }
         }
         this.getDisable('right');
-        let month = dayjs().month();
+        let month = getDayjs().month();
         if (side === SideEnum.right && this.listKeyFromSelected().month) {
             month = Number(this.listKeyFromSelected().month) - 1;
         }
@@ -852,8 +853,8 @@ class LibsUiComponentsDatetimePickerCustomRangesCalendarComponent {
     }
     monthOrYearChanged(month, year, side) {
         const isLeft = side === SideEnum.left;
-        const minDate = this.minDate();
-        const maxDate = this.maxDate();
+        const minDate = getDayjs({ date: this.minDate() });
+        const maxDate = getDayjs({ date: this.maxDate() });
         if (minDate && (year < minDate?.year() || (year === minDate?.year() && month < minDate?.month()))) {
             month = minDate?.month();
             year = minDate?.year();
@@ -1150,12 +1151,12 @@ class LibsUiComponentsDatetimePickerCustomRangesCalendarComponent {
         const hour = mainCalendar.month.hour();
         const minute = mainCalendar.month.minute();
         const second = mainCalendar.month.second();
-        const daysInMonth = dayjs(new Date(year, month)).daysInMonth();
-        const firstDay = dayjs(new Date(year, month, 1));
-        const lastDay = dayjs(new Date(year, month, daysInMonth));
-        const lastMonth = dayjs(firstDay).subtract(1, 'month').month();
-        const lastYear = dayjs(firstDay).subtract(1, 'month').year();
-        const daysInLastMonth = dayjs(new Date(lastYear, lastMonth)).daysInMonth();
+        const daysInMonth = getDayjs({ date: new Date(year, month) }).daysInMonth();
+        const firstDay = getDayjs({ date: new Date(year, month, 1) });
+        const lastDay = getDayjs({ date: new Date(year, month, daysInMonth) });
+        const lastMonth = getDayjs({ date: firstDay.subtract(1, 'month') }).month();
+        const lastYear = getDayjs({ date: firstDay.subtract(1, 'month') }).year();
+        const daysInLastMonth = getDayjs({ date: new Date(lastYear, lastMonth) }).daysInMonth();
         const dayOfWeek = firstDay.day();
         const calendar = {};
         calendar.firstDay = firstDay;
@@ -1170,16 +1171,16 @@ class LibsUiComponentsDatetimePickerCustomRangesCalendarComponent {
         if (dayOfWeek === this.dateOptions().firstDay) {
             startDay = daysInLastMonth - 6;
         }
-        let curDate = dayjs(new Date(lastYear, lastMonth, startDay, 12, minute, second));
-        for (let i = 0, col = 0, row = 0; i < 42; i++, col++, curDate = dayjs(curDate).add(24, 'hour')) {
+        let curDate = getDayjs({ date: new Date(lastYear, lastMonth, startDay, 12, minute, second) });
+        for (let i = 0, col = 0, row = 0; i < 42; i++, col++, curDate = getDayjs({ date: curDate }).add(24, 'hour')) {
             if (i > 0 && col % 7 === 0) {
                 col = 0;
                 row++;
             }
             calendar[row][col] = curDate.clone().hour(hour).minute(minute).second(second);
             curDate = curDate.hour(12);
-            const minDate = this.minDate();
-            const maxDate = this.maxDate();
+            const minDate = getDayjs({ date: this.minDate() });
+            const maxDate = getDayjs({ date: this.maxDate() });
             if (minDate && calendar[row][col].format('YYYY-MM-DD') === minDate?.format('YYYY-MM-DD') && calendar[row][col].isBefore(minDate) && side === 'left') {
                 calendar[row][col] = minDate?.clone();
             }
@@ -1199,8 +1200,8 @@ class LibsUiComponentsDatetimePickerCustomRangesCalendarComponent {
                 return current;
             });
         }
-        const minDate = side === 'left' ? this.minDate() : this.startDate();
-        const maxDate = this.maxDate();
+        const minDate = side === 'left' ? getDayjs({ date: this.minDate() }) : getDayjs({ date: this.startDate() });
+        const maxDate = getDayjs({ date: this.maxDate() });
         this.calendarVariables()[side].set({
             month: month,
             year: year,
@@ -1254,8 +1255,8 @@ class LibsUiComponentsDatetimePickerCustomRangesCalendarComponent {
             }
             for (let col = 0; col < 7; col++) {
                 const classes = [];
-                const startDate = this.startDate();
-                const endDate = this.endDate();
+                const startDate = getDayjs({ date: this.startDate() });
+                const endDate = getDayjs({ date: this.endDate() });
                 const nowHoveredDate = this.nowHoveredDate();
                 if (calendar[row][col].isSame(new Date(), 'day')) {
                     classes.push('today');
@@ -1302,10 +1303,10 @@ class LibsUiComponentsDatetimePickerCustomRangesCalendarComponent {
         }
     }
     renderTimePicker(side) {
-        let selected = dayjs(), minDate;
-        const maxDate = this.maxDate();
-        const startDate = this.startDate();
-        const endDate = this.endDate();
+        let selected = getDayjs(), minDate;
+        const maxDate = getDayjs({ date: this.maxDate() });
+        const startDate = getDayjs({ date: this.startDate() });
+        const endDate = getDayjs({ date: this.endDate() });
         if (side === SideEnum.left && startDate) {
             selected = startDate.clone();
             minDate = this.maxDate();
@@ -1318,7 +1319,7 @@ class LibsUiComponentsDatetimePickerCustomRangesCalendarComponent {
             if (!startDate) {
                 return;
             }
-            selected = this.getDateWithTime(startDate, SideEnum.right);
+            selected = getDayjs({ date: this.getDateWithTime(startDate, SideEnum.right) });
             if (selected.isBefore(startDate)) {
                 selected = startDate.clone();
             }
@@ -1423,7 +1424,7 @@ class LibsUiComponentsDatetimePickerCustomRangesCalendarComponent {
             return value;
         }
         if (typeof value === 'string') {
-            return dayjs(value);
+            return getDayjs({ date: value });
         }
         return undefined;
     }
@@ -1491,8 +1492,8 @@ class LibsUiComponentsDatetimePickerCustomRangesComponent {
     flagMouse = input({ isMouseEnter: false, isMouseEnterContent: false });
     dateOptions = input({ ...defaultLocaleConfig(), ...getDateOptions() });
     alwaysShowCalendars = input(false);
-    startDate = model(dayjs().startOf('day'));
-    endDate = model(dayjs().endOf('day'));
+    startDate = model(getDayjs().startOf('day'));
+    endDate = model(getDayjs().endOf('day'));
     showCustomRangeLabel = input(undefined);
     keepCalendarOpeningWithRange = input(undefined);
     singleDateSelected = input(undefined, {
@@ -1502,7 +1503,7 @@ class LibsUiComponentsDatetimePickerCustomRangesComponent {
             }
             let date = value.date;
             if (typeof date === 'string') {
-                date = dayjs(date);
+                date = getDayjs({ date, returnDayjsIfConfigDateNotExist: true });
             }
             return {
                 ...value,
@@ -1518,10 +1519,10 @@ class LibsUiComponentsDatetimePickerCustomRangesComponent {
             let startDate = value.startDate;
             let endDate = value.endDate;
             if (typeof startDate === 'string') {
-                startDate = dayjs(startDate);
+                startDate = getDayjs({ date: startDate, returnDayjsIfConfigDateNotExist: true });
             }
             if (typeof endDate === 'string') {
-                endDate = dayjs(endDate);
+                endDate = getDayjs({ date: endDate, returnDayjsIfConfigDateNotExist: true });
             }
             return {
                 ...value,
@@ -1542,10 +1543,10 @@ class LibsUiComponentsDatetimePickerCustomRangesComponent {
     }
     onAfterViewInit() {
         if (!this.startDate()) {
-            this.startDate.set(dayjs().startOf('day'));
+            this.startDate.set(getDayjs().startOf('day'));
         }
         if (!this.endDate()) {
-            this.endDate.set(dayjs().endOf('day'));
+            this.endDate.set(getDayjs().endOf('day'));
         }
         const dateRangeSelected = this.dateRangeSelected();
         const singleDateSelected = this.singleDateSelected();
@@ -1555,7 +1556,7 @@ class LibsUiComponentsDatetimePickerCustomRangesComponent {
         };
         if (this.isSingle()) {
             if (this.hasTimePicker()) {
-                const now = dayjs();
+                const now = getDayjs();
                 this.startDate.update(current => {
                     if (current) {
                         current.set('hour', 10).set('minute', 30);
@@ -1571,8 +1572,8 @@ class LibsUiComponentsDatetimePickerCustomRangesComponent {
                 });
             }
             if (singleDateSelected?.date) {
-                this.startDate.set(singleDateSelected.date);
-                this.endDate.set(singleDateSelected.date);
+                this.startDate.set(getDayjs({ date: singleDateSelected.date }));
+                this.endDate.set(getDayjs({ date: singleDateSelected.date }));
             }
             this.renderRanges();
             return;
@@ -1580,8 +1581,8 @@ class LibsUiComponentsDatetimePickerCustomRangesComponent {
         if (dateRangeSelected) {
             this.selectedQuickRange.set(dateRangeSelected.quickRangeId ? dateRangeSelected.quickRangeId : customRange.id);
             this.chosenQuickRange.set(dateRangeSelected.quickRangeId ?? customRange.id);
-            this.startDate.set(dateRangeSelected.startDate);
-            this.endDate.set(dateRangeSelected.endDate);
+            this.startDate.set(getDayjs({ date: dateRangeSelected.startDate }));
+            this.endDate.set(getDayjs({ date: dateRangeSelected.endDate }));
         }
         if (this.hasTimePicker()) {
             this.selectedQuickRange.set(customRange.id);
@@ -1608,8 +1609,8 @@ class LibsUiComponentsDatetimePickerCustomRangesComponent {
         this.quickRangesArray.set([]);
         for (const key in ranges) {
             const rangeValue = rangesDefault[key];
-            const start = dayjs(rangeValue[0]);
-            const end = dayjs(rangeValue[1]);
+            const start = getDayjs({ date: rangeValue[0], returnDayjsIfConfigDateNotExist: true });
+            const end = getDayjs({ date: rangeValue[1], returnDayjsIfConfigDateNotExist: true });
             this.quickRangesArray.update(current => {
                 current.push({
                     id: key,
@@ -1880,7 +1881,7 @@ class LibsUiComponentsDatetimePickerComponent {
         this.outSelectSingleDate.emit(data);
         this.chosenDateFromRanges.set({ selectedLabel: data.displayLabel });
         if (this.hasTimePicker()) {
-            const startTime = dayjs(data.date).format('DD/MM/YYYY HH:mm');
+            const startTime = getDayjs({ date: data.date, returnDayjsIfConfigDateNotExist: true }).format('DD/MM/YYYY HH:mm');
             this.chosenDateFromRanges.update(current => {
                 current.selectedLabel = `${startTime}`;
                 return current;
@@ -1896,11 +1897,11 @@ class LibsUiComponentsDatetimePickerComponent {
         }
         // this.selectedKey = data.selectedLabel;
         this.chosenDateFromRanges.set({ selectedLabel: data.displayLabel });
-        // this.selected.start = dayjs(data.startDate);
-        // this.selected.end = dayjs(data.endDate);
+        // this.selected.start = getDayjs<Dayjs>({date:data.startDate});
+        // this.selected.end = getDayjs<Dayjs>({date:data.endDate});
         if (this.hasTimePicker()) {
-            const startTime = dayjs(data.startDate).format('DD/MM/YYYY HH:mm');
-            const endTime = dayjs(data.endDate).format('DD/MM/YYYY HH:mm');
+            const startTime = getDayjs({ date: data.startDate, returnDayjsIfConfigDateNotExist: true }).format('DD/MM/YYYY HH:mm');
+            const endTime = getDayjs({ date: data.endDate, returnDayjsIfConfigDateNotExist: true }).format('DD/MM/YYYY HH:mm');
             this.chosenDateFromRanges.update(current => {
                 current.selectedLabel = `${startTime} - ${endTime}`;
                 return current;