Skip to content

Commit b2c3ed0

Browse files
Philip Sultanescutinayuangao
Philip Sultanescu
authored andcommitted
fix(datepicker): minValidator & maxValidation false errors (#4649)
* Min and max dates give false validation errors when selected date is one of the two * Include unit-tests to catch min/max validation errors
1 parent 1fce545 commit b2c3ed0

File tree

2 files changed

+72
-10
lines changed

2 files changed

+72
-10
lines changed

src/lib/datepicker/datepicker-input.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -130,14 +130,14 @@ export class MdDatepickerInput<D> implements AfterContentInit, ControlValueAcces
130130
/** The form control validator for the min date. */
131131
private _minValidator: ValidatorFn = (control: AbstractControl): ValidationErrors | null => {
132132
return (!this.min || !control.value ||
133-
this._dateAdapter.compareDate(this.min, control.value) < 0) ?
133+
this._dateAdapter.compareDate(this.min, control.value) <= 0) ?
134134
null : {'mdDatepickerMin': {'min': this.min, 'actual': control.value}};
135135
}
136136

137137
/** The form control validator for the max date. */
138138
private _maxValidator: ValidatorFn = (control: AbstractControl): ValidationErrors | null => {
139139
return (!this.max || !control.value ||
140-
this._dateAdapter.compareDate(this.max, control.value) > 0) ?
140+
this._dateAdapter.compareDate(this.max, control.value) >= 0) ?
141141
null : {'mdDatepickerMax': {'max': this.max, 'actual': control.value}};
142142
}
143143

src/lib/datepicker/datepicker.spec.ts

Lines changed: 70 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ describe('MdDatepicker', () => {
3232
declarations: [
3333
DatepickerWithFilterAndValidation,
3434
DatepickerWithFormControl,
35-
DatepickerWithMinAndMax,
35+
DatepickerWithMinAndMaxValidation,
3636
DatepickerWithNgModel,
3737
DatepickerWithStartAt,
3838
DatepickerWithToggle,
@@ -413,12 +413,12 @@ describe('MdDatepicker', () => {
413413
});
414414
});
415415

416-
describe('datepicker with min and max dates', () => {
417-
let fixture: ComponentFixture<DatepickerWithMinAndMax>;
418-
let testComponent: DatepickerWithMinAndMax;
416+
describe('datepicker with min and max dates and validation', () => {
417+
let fixture: ComponentFixture<DatepickerWithMinAndMaxValidation>;
418+
let testComponent: DatepickerWithMinAndMaxValidation;
419419

420420
beforeEach(async(() => {
421-
fixture = TestBed.createComponent(DatepickerWithMinAndMax);
421+
fixture = TestBed.createComponent(DatepickerWithMinAndMaxValidation);
422422
fixture.detectChanges();
423423

424424
testComponent = fixture.componentInstance;
@@ -433,6 +433,66 @@ describe('MdDatepicker', () => {
433433
expect(testComponent.datepicker._minDate).toEqual(new Date(2010, JAN, 1));
434434
expect(testComponent.datepicker._maxDate).toEqual(new Date(2020, JAN, 1));
435435
});
436+
437+
it('should mark invalid when value is before min', () => {
438+
testComponent.date = new Date(2009, DEC, 31);
439+
fixture.detectChanges();
440+
441+
fixture.whenStable().then(() => {
442+
fixture.detectChanges();
443+
444+
expect(fixture.debugElement.query(By.css('input')).nativeElement.classList)
445+
.toContain('ng-invalid');
446+
});
447+
});
448+
449+
it('should mark invalid when value is after max', () => {
450+
testComponent.date = new Date(2020, JAN, 2);
451+
fixture.detectChanges();
452+
453+
fixture.whenStable().then(() => {
454+
fixture.detectChanges();
455+
456+
expect(fixture.debugElement.query(By.css('input')).nativeElement.classList)
457+
.toContain('ng-invalid');
458+
});
459+
});
460+
461+
it('should not mark invalid when value equals min', () => {
462+
testComponent.date = testComponent.datepicker._minDate;
463+
fixture.detectChanges();
464+
465+
fixture.whenStable().then(() => {
466+
fixture.detectChanges();
467+
468+
expect(fixture.debugElement.query(By.css('input')).nativeElement.classList)
469+
.not.toContain('ng-invalid');
470+
});
471+
});
472+
473+
it('should not mark invalid when value equals max', () => {
474+
testComponent.date = testComponent.datepicker._maxDate;
475+
fixture.detectChanges();
476+
477+
fixture.whenStable().then(() => {
478+
fixture.detectChanges();
479+
480+
expect(fixture.debugElement.query(By.css('input')).nativeElement.classList)
481+
.not.toContain('ng-invalid');
482+
});
483+
});
484+
485+
it('should not mark invalid when value is between min and max', () => {
486+
testComponent.date = new Date(2010, JAN, 2);
487+
fixture.detectChanges();
488+
489+
fixture.whenStable().then(() => {
490+
fixture.detectChanges();
491+
492+
expect(fixture.debugElement.query(By.css('input')).nativeElement.classList)
493+
.not.toContain('ng-invalid');
494+
});
495+
});
436496
});
437497

438498
describe('datepicker with filter and validation', () => {
@@ -606,14 +666,16 @@ class InputContainerDatepicker {
606666

607667
@Component({
608668
template: `
609-
<input [mdDatepicker]="d" [min]="minDate" [max]="maxDate">
669+
<input [mdDatepicker]="d" [(ngModel)]="date" [min]="minDate" [max]="maxDate">
670+
<button [mdDatepickerToggle]="d"></button>
610671
<md-datepicker #d></md-datepicker>
611672
`,
612673
})
613-
class DatepickerWithMinAndMax {
674+
class DatepickerWithMinAndMaxValidation {
675+
@ViewChild('d') datepicker: MdDatepicker<Date>;
676+
date: Date;
614677
minDate = new Date(2010, JAN, 1);
615678
maxDate = new Date(2020, JAN, 1);
616-
@ViewChild('d') datepicker: MdDatepicker<Date>;
617679
}
618680

619681

0 commit comments

Comments
 (0)