fix(date-picker): add validation when disabledDates is set #7800

Author: PlamenaMiteva

projects/igniteui-angular/src/lib/date-picker/date-picker.component.spec.ts

@@ -1,6 +1,6 @@
 import { Component, ViewChild, ElementRef, EventEmitter } from '@angular/core';
 import { async, fakeAsync, TestBed, tick, flush, ComponentFixture } from '@angular/core/testing';
-import { FormsModule, FormGroup, FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
+import { FormsModule, FormGroup, FormBuilder, ReactiveFormsModule, Validators, NgControl } from '@angular/forms';
 import { By } from '@angular/platform-browser';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { IgxDatePickerComponent, IgxDatePickerModule } from './date-picker.component';
@@ -329,97 +329,97 @@ describe('IgxDatePicker', () => {
     });
 
     it('When datepicker in "dropdown" mode is closed via outside click, the input should not receive focus',
-    fakeAsync(() => {
-        const fixture = TestBed.createComponent(IgxDatePickerDropdownButtonsComponent);
-        fixture.detectChanges();
+        fakeAsync(() => {
+            const fixture = TestBed.createComponent(IgxDatePickerDropdownButtonsComponent);
+            fixture.detectChanges();
 
-        const datePickerDom = fixture.debugElement.query(By.css('igx-date-picker'));
-        const input = fixture.debugElement.query(By.directive(IgxInputDirective)).nativeElement;
-        let overlayToggle = document.getElementsByClassName('igx-overlay__wrapper');
+            const datePickerDom = fixture.debugElement.query(By.css('igx-date-picker'));
+            const input = fixture.debugElement.query(By.directive(IgxInputDirective)).nativeElement;
+            let overlayToggle = document.getElementsByClassName('igx-overlay__wrapper');
 
-        expect(overlayToggle.length).toEqual(0);
+            expect(overlayToggle.length).toEqual(0);
 
-        UIInteractions.triggerKeyDownEvtUponElem('space', datePickerDom.nativeElement, false);
-        flush();
-        fixture.detectChanges();
+            UIInteractions.triggerKeyDownEvtUponElem('space', datePickerDom.nativeElement, false);
+            flush();
+            fixture.detectChanges();
 
-        overlayToggle = document.getElementsByClassName('igx-overlay__wrapper');
-        expect(overlayToggle[0]).not.toBeNull();
-        expect(overlayToggle[0]).not.toBeUndefined();
+            overlayToggle = document.getElementsByClassName('igx-overlay__wrapper');
+            expect(overlayToggle[0]).not.toBeNull();
+            expect(overlayToggle[0]).not.toBeUndefined();
 
-        const dummyInput = fixture.componentInstance.dummyInput.nativeElement;
-        dummyInput.focus();
-        dummyInput.click();
-        tick();
-        fixture.detectChanges();
+            const dummyInput = fixture.componentInstance.dummyInput.nativeElement;
+            dummyInput.focus();
+            dummyInput.click();
+            tick();
+            fixture.detectChanges();
 
-        overlayToggle = document.getElementsByClassName('igx-overlay__wrapper');
-        expect(overlayToggle[0]).toEqual(undefined);
-        expect(input).not.toEqual(document.activeElement);
-        expect(dummyInput).toEqual(document.activeElement);
-    }));
+            overlayToggle = document.getElementsByClassName('igx-overlay__wrapper');
+            expect(overlayToggle[0]).toEqual(undefined);
+            expect(input).not.toEqual(document.activeElement);
+            expect(dummyInput).toEqual(document.activeElement);
+        }));
 
     it('When datepicker in "dropdown" mode, should focus input on user interaction with Today btn, Cancel btn, Enter Key, Escape key',
-    fakeAsync(() => {
-        const fixture = TestBed.createComponent(IgxDatePickerDropdownButtonsComponent);
-        fixture.detectChanges();
-        const datePickerDom = fixture.debugElement.query(By.css('igx-date-picker'));
-        const input = fixture.debugElement.query(By.directive(IgxInputDirective)).nativeElement;
-        let overlayToggle = document.getElementsByClassName('igx-overlay__wrapper');
-        expect(overlayToggle.length).toEqual(0);
+        fakeAsync(() => {
+            const fixture = TestBed.createComponent(IgxDatePickerDropdownButtonsComponent);
+            fixture.detectChanges();
+            const datePickerDom = fixture.debugElement.query(By.css('igx-date-picker'));
+            const input = fixture.debugElement.query(By.directive(IgxInputDirective)).nativeElement;
+            let overlayToggle = document.getElementsByClassName('igx-overlay__wrapper');
+            expect(overlayToggle.length).toEqual(0);
 
-        UIInteractions.triggerKeyDownEvtUponElem('space', datePickerDom.nativeElement, false);
-        flush();
-        fixture.detectChanges();
-        const buttons = document.getElementsByClassName('igx-button--flat');
-        expect(buttons.length).toEqual(2);
+            UIInteractions.triggerKeyDownEvtUponElem('space', datePickerDom.nativeElement, false);
+            flush();
+            fixture.detectChanges();
+            const buttons = document.getElementsByClassName('igx-button--flat');
+            expect(buttons.length).toEqual(2);
 
-        // Today btn
-        const todayBtn = buttons[1] as HTMLElement;
-        expect(todayBtn.innerText).toBe('Today');
-        todayBtn.click();
-        tick();
-        fixture.detectChanges();
-        overlayToggle = document.getElementsByClassName('igx-overlay__wrapper');
-        expect(overlayToggle[0]).toEqual(undefined);
-        expect(input).toEqual(document.activeElement);
+            // Today btn
+            const todayBtn = buttons[1] as HTMLElement;
+            expect(todayBtn.innerText).toBe('Today');
+            todayBtn.click();
+            tick();
+            fixture.detectChanges();
+            overlayToggle = document.getElementsByClassName('igx-overlay__wrapper');
+            expect(overlayToggle[0]).toEqual(undefined);
+            expect(input).toEqual(document.activeElement);
 
-        // Cancel btn
-        UIInteractions.triggerKeyDownEvtUponElem('space', datePickerDom.nativeElement, false);
-        flush();
-        fixture.detectChanges();
-        const cancelBtn = buttons[0] as HTMLElement;
-        expect(cancelBtn.innerText).toBe('Cancel');
-        cancelBtn.click();
-        tick();
-        fixture.detectChanges();
-        overlayToggle = document.getElementsByClassName('igx-overlay__wrapper');
-        expect(overlayToggle[0]).toEqual(undefined);
-        expect(input).toEqual(document.activeElement);
+            // Cancel btn
+            UIInteractions.triggerKeyDownEvtUponElem('space', datePickerDom.nativeElement, false);
+            flush();
+            fixture.detectChanges();
+            const cancelBtn = buttons[0] as HTMLElement;
+            expect(cancelBtn.innerText).toBe('Cancel');
+            cancelBtn.click();
+            tick();
+            fixture.detectChanges();
+            overlayToggle = document.getElementsByClassName('igx-overlay__wrapper');
+            expect(overlayToggle[0]).toEqual(undefined);
+            expect(input).toEqual(document.activeElement);
 
-        // Enter key
-        UIInteractions.triggerKeyDownEvtUponElem('space', datePickerDom.nativeElement, false);
-        flush();
-        fixture.detectChanges();
-        document.activeElement.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
-        tick();
-        fixture.detectChanges();
-        overlayToggle = document.getElementsByClassName('igx-overlay__wrapper');
-        expect(overlayToggle[0]).toEqual(undefined);
-        expect(input).toEqual(document.activeElement);
+            // Enter key
+            UIInteractions.triggerKeyDownEvtUponElem('space', datePickerDom.nativeElement, false);
+            flush();
+            fixture.detectChanges();
+            document.activeElement.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
+            tick();
+            fixture.detectChanges();
+            overlayToggle = document.getElementsByClassName('igx-overlay__wrapper');
+            expect(overlayToggle[0]).toEqual(undefined);
+            expect(input).toEqual(document.activeElement);
 
-        // Esc key
-        UIInteractions.triggerKeyDownEvtUponElem('space', datePickerDom.nativeElement, false);
-        flush();
-        fixture.detectChanges();
-        document.activeElement.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
-        tick();
-        fixture.detectChanges();
+            // Esc key
+            UIInteractions.triggerKeyDownEvtUponElem('space', datePickerDom.nativeElement, false);
+            flush();
+            fixture.detectChanges();
+            document.activeElement.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
+            tick();
+            fixture.detectChanges();
 
-        overlayToggle = document.getElementsByClassName('igx-overlay__wrapper');
-        expect(overlayToggle[0]).toEqual(undefined);
-        expect(input).toEqual(document.activeElement);
-    }));
+            overlayToggle = document.getElementsByClassName('igx-overlay__wrapper');
+            expect(overlayToggle[0]).toEqual(undefined);
+            expect(input).toEqual(document.activeElement);
+        }));
 
     it('Datepicker week start day (Monday)', () => {
         const fixture = TestBed.createComponent(IgxDatePickerWithWeekStartComponent);
@@ -1332,12 +1332,33 @@ describe('IgxDatePicker', () => {
             fixture.detectChanges();
             expect(inputDirective.valid).toEqual(IgxInputState.INITIAL);
 
-            inputDirectiveElement.triggerEventHandler('blur', { target: { value: ''}});
+            inputDirectiveElement.triggerEventHandler('blur', { target: { value: '' } });
             fixture.detectChanges();
 
             expect(inputDirective.valid).toEqual(IgxInputState.INVALID);
         }));
 
+        it('Should set date picker status to invalid when date is disabled', fakeAsync(() => {
+            datePickerOnChangeComponent.disabledDates = [{ type: DateRangeType.Before, dateRange: [new Date()] }];
+            const inputGroupsElements = fixture.debugElement.queryAll(By.directive(IgxInputDirective));
+            const inputGroupElement = inputGroupsElements.find(d => d.componentInstance === datePickerOnChangeComponent);
+            const inputDirective = inputGroupElement.injector.get(IgxInputDirective) as IgxInputDirective;
+
+            const today = new Date();
+            datePickerOnChangeComponent.value = new Date(today.getFullYear(), today.getMonth(), today.getDate() - 1);
+            fixture.detectChanges();
+            expect(inputDirective.valid).toEqual(IgxInputState.INVALID);
+
+            datePickerOnChangeComponent.value = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 1);
+            fixture.detectChanges();
+            expect(inputDirective.valid).toEqual(IgxInputState.INITIAL);
+
+            datePickerOnChangeComponent.disabledDates = [{ type: DateRangeType.Before,
+                                            dateRange: [new Date(today.getFullYear(), today.getMonth(), today.getDate() + 2)] }];
+            fixture.detectChanges();
+            expect(inputDirective.valid).toEqual(IgxInputState.INVALID);
+        }));
+
         // Bug #6025 Date picker does not disable in reactive form
         it('Should disable when form is disabled', () => {
             const formGroup: FormGroup = fixture.componentInstance.reactiveForm;
@@ -1375,10 +1396,10 @@ describe('IgxDatePicker', () => {
             };
             element = {};
             cdr = {
-                markForCheck: () => {},
-                detectChanges: () => {},
-                detach: () => {},
-                reattach: () => {}
+                markForCheck: () => { },
+                detectChanges: () => { },
+                detach: () => { },
+                reattach: () => { }
             };
             moduleRef = {};
             injector = { get: () => ngModel };
@@ -1388,7 +1409,7 @@ describe('IgxDatePicker', () => {
         it('should initialize date picker with required correctly', () => {
             const datePicker = new IgxDatePickerComponent(overlay, element, cdr, moduleRef, injector);
             datePicker['inputGroup'] = inputGroup;
-            ngModel.control.validator = () => ({ required: true});
+            ngModel.control.validator = () => ({ required: true });
             datePicker.ngOnInit();
             datePicker.ngAfterViewInit();
             datePicker.ngAfterViewChecked();
@@ -1407,11 +1428,11 @@ describe('IgxDatePicker', () => {
             expect(datePicker).toBeDefined();
             expect(inputGroup.isRequired).toBeFalsy();
 
-            ngModel.control.validator = () => ({ required: true});
+            ngModel.control.validator = () => ({ required: true });
             ngModel.statusChanges.emit();
             expect(inputGroup.isRequired).toBeTruthy();
 
-            ngModel.control.validator = () => ({ required: false});
+            ngModel.control.validator = () => ({ required: false });
             ngModel.statusChanges.emit();
             expect(inputGroup.isRequired).toBeFalsy();
         });
@@ -1583,7 +1604,7 @@ class IgxDatePickerReactiveFormComponent {
         const date = new Date(2000, 10, 15);
         this.reactiveForm = fb.group({
             datePickerOnChange: [date, Validators.required],
-            datePickerOnBlur: [date, { updateOn: 'blur', validators: Validators.required}]
+            datePickerOnBlur: [date, { updateOn: 'blur', validators: Validators.required }]
         });
     }
 }

projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts

@@ -20,7 +20,7 @@ import {
     Injector,
     AfterViewChecked
 } from '@angular/core';
-import { ControlValueAccessor, NG_VALUE_ACCESSOR, NgControl, AbstractControl } from '@angular/forms';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR, NgControl, AbstractControl, NG_VALIDATORS, FormControl, ValidationErrors } from '@angular/forms';
 import {
     IgxCalendarComponent,
     IgxCalendarHeaderTemplateDirective,
@@ -133,6 +133,11 @@ const noop = () => { };
             provide: NG_VALUE_ACCESSOR,
             useExisting: IgxDatePickerComponent,
             multi: true
+        },
+        {
+            provide: NG_VALIDATORS,
+            useExisting: IgxDatePickerComponent,
+            multi: true
         }],
     // tslint:disable-next-line:component-selector
     selector: 'igx-date-picker',
@@ -308,6 +313,10 @@ export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor
     }
     public set disabledDates(value: DateRangeDescriptor[]) {
         this._disabledDates = value;
+        if (this._ngControl && this._value && this._disabledDates) {
+            this._ngControl.control.validator({} as AbstractControl);
+            this._onChangeCallback(this._value);
+        }
     }
 
     /**
@@ -741,6 +750,13 @@ export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor
     /** @hidden @internal */
     public setDisabledState(isDisabled: boolean): void { this.disabled = isDisabled; }
 
+    /** @hidden @internal */
+    public validate(control: AbstractControl): ValidationErrors | null {
+        if (this.value && this.disabledDates && isDateInRanges(this.value, this.disabledDates)) {
+            return { dateIsDisabled: true };
+        }
+        return null;
+    }
     //#endregion
 
     /**
@@ -874,7 +890,7 @@ export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor
 
     protected onStatusChanged() {
         if ((this._ngControl.control.touched || this._ngControl.control.dirty) &&
-            (this._ngControl.control.validator || this._ngControl.control.asyncValidator)) {
+            (this._ngControl.control.validator || this._ngControl.control.asyncValidator) && this.inputGroup) {
             if (this.inputGroup.isFocused) {
                 this._inputDirective.valid = this._ngControl.valid ? IgxInputState.VALID : IgxInputState.INVALID;
             } else {