fix(caledar): enable setting ISO format dates 17.1.x (#14115)

Co-authored-by: Hristo <[email protected]>

Author: dobromirts

projects/igniteui-angular/src/lib/calendar/calendar-base.ts

@@ -366,7 +366,12 @@ export class IgxCalendarBaseDirective implements ControlValueAccessor {
      * a single `Date` object.
      * Otherwise it is an array of `Date` objects.
      */
-    public set value(value: Date | Date[]) {
+    public set value(value: Date | Date[] | string) {
+        // Validate the date if it is of type string and it is IsoDate
+        if (typeof value === 'string') {
+            value = DateTimeUtil.parseIsoDate(value);
+        }
+
         if (!value || !!value && (value as Date[]).length === 0) {
             this.selectedDatesWithoutFocus = new Date();
             return;
@@ -392,11 +397,15 @@ export class IgxCalendarBaseDirective implements ControlValueAccessor {
     /**
      * Sets the date that will be presented in the default view when the component renders.
      */
-    public set viewDate(value: Date) {
+    public set viewDate(value: Date | string) {
         if (Array.isArray(value)) {
             return;
         }
 
+        if (typeof value === 'string') {
+            value = DateTimeUtil.parseIsoDate(value);
+        }
+
         const validDate = this.validateDate(value);
         if (this._viewDate) {
             this.selectedDatesWithoutFocus = validDate;
@@ -528,18 +537,26 @@ export class IgxCalendarBaseDirective implements ControlValueAccessor {
      *
      * @hidden
      */
-    public isDateDisabled(date: Date) {
+    public isDateDisabled(date: Date | string) {
         if (this.disabledDates === null) {
             return false;
         }
 
+        if (typeof date === 'string') {
+            date = DateTimeUtil.parseIsoDate(date);
+        }
+
         return isDateInRanges(date, this.disabledDates);
     }
 
     /**
      * Selects date(s) (based on the selection type).
      */
-    public selectDate(value: Date | Date[]) {
+    public selectDate(value: Date | Date[] | string) {
+        if (typeof value === 'string') {
+            value = DateTimeUtil.parseIsoDate(value);
+        }
+
         if (value === null || value === undefined || (Array.isArray(value) && value.length === 0)) {
             return;
         }
@@ -562,11 +579,15 @@ export class IgxCalendarBaseDirective implements ControlValueAccessor {
     /**
      * Deselects date(s) (based on the selection type).
      */
-    public deselectDate(value?: Date | Date[]) {
+    public deselectDate(value?: Date | Date[] | string) {
         if (!this.selectedDates || this.selectedDates.length === 0) {
             return;
         }
 
+        if (typeof value === 'string') {
+            value = DateTimeUtil.parseIsoDate(value);
+        }
+
         if (value === null || value === undefined) {
             this.selectedDates = this.selection === CalendarSelection.SINGLE ? null : [];
             this.rangeStarted = false;

projects/igniteui-angular/src/lib/calendar/calendar.component.spec.ts

@@ -238,6 +238,21 @@ describe('IgxCalendar - ', () => {
                 );
 
                 expect(() => (calendar.selection = 'non-existant')).toThrow();
+
+                const todayIsoDate = new Date(Date.now()).toISOString();
+
+                calendar.viewDate = todayIsoDate;
+                fixture.detectChanges();
+
+                calendar.value = new Date(todayIsoDate);
+                fixture.detectChanges();
+
+                expect(
+                    (fixture.componentInstance.model as Date).toDateString(),
+                ).toMatch(new Date(todayIsoDate).toDateString());
+                expect((calendar.value as Date).toDateString()).toMatch(
+                    new Date(todayIsoDate).toDateString(),
+                );
             });
 
             it('Should properly set formatOptions and formatViews', () => {
@@ -320,6 +335,20 @@ describe('IgxCalendar - ', () => {
                 fixture.detectChanges();
 
                 expect(calendar.viewDate.getMonth()).toEqual(date.getMonth());
+
+                const isoStringDate = new Date(2020, 10, 10).toISOString();
+                calendar.viewDate = isoStringDate;
+                fixture.detectChanges();
+                expect(calendar.viewDate.getMonth()).toEqual(
+                    new Date(isoStringDate).getMonth(),
+                );
+
+                calendar.value = new Date(2020, 11, 15).toISOString();
+                fixture.detectChanges();
+
+                expect(calendar.viewDate.getMonth()).toEqual(
+                    new Date(isoStringDate).getMonth(),
+                );
             });
 
             it('Should properly set locale', () => {
@@ -606,7 +635,7 @@ describe('IgxCalendar - ', () => {
                 const target = dom.query(By.css(HelperTestFunctions.SELECTED_DATE_CSSCLASS));
                 const weekDiv = target.parent;
                 const weekDays = weekDiv.queryAll(By.css(HelperTestFunctions.DAY_CSSCLASS));
-                const nextDay = new Date(2017, 5, 14);
+                let nextDay = new Date(2017, 5, 14);
 
                 expect((calendar.value as Date).toDateString()).toMatch(
                     new Date(2017, 5, 13).toDateString()
@@ -623,6 +652,14 @@ describe('IgxCalendar - ', () => {
                     (fixture.componentInstance.model as Date).toDateString()
                 ).toMatch(nextDay.toDateString());
                 HelperTestFunctions.verifyDateNotSelected(target);
+
+                nextDay = new Date(2017, 6, 15);
+                calendar.selectDate(new Date(2017, 6, 15).toISOString());
+                fixture.detectChanges();
+
+                expect((calendar.value as Date).toDateString()).toMatch(
+                    nextDay.toDateString(),
+                );
             });
 
             it('Calendar selection - multiple with event', () => {
@@ -1412,6 +1449,25 @@ describe('IgxCalendar - ', () => {
 
                 selectedDate = calendar.value;
                 expect(selectedDate).toEqual(date);
+
+                // Select date with ISOString as value
+                const isoDate = new Date(2024, 10, 10).toISOString();
+                calendar.selectDate(isoDate);
+                fixture.detectChanges();
+                expect(calendar.value).toEqual(new Date(isoDate));
+
+                calendar.deselectDate(isoDate);
+                fixture.detectChanges();
+                expect(calendar.value).toBeNull();
+
+                // Deselect with date different than selected date
+                calendar.selectDate(isoDate);
+                fixture.detectChanges();
+                expect(calendar.value).toEqual(new Date(isoDate));
+
+                calendar.deselectDate(new Date(2024, 10, 11).toISOString());
+                fixture.detectChanges();
+                expect(calendar.value).toEqual(new Date(isoDate));
             });
 
             it('Deselect using API. Should deselect in "multi" selection mode.', () => {

projects/igniteui-angular/src/lib/calendar/calendar.component.ts

@@ -870,7 +870,7 @@ export class IgxCalendarComponent extends IgxMonthPickerBaseDirective implements
      *  this.calendar.deselectDate(new Date(`2018-06-12`));
      * ````
      */
-    public override deselectDate(value?: Date | Date[]) {
+    public override deselectDate(value?: Date | Date[] | string) {
         super.deselectDate(value);
 
         this.monthViews.forEach((view) => {