From 380bdaeab8e2088a90e33474090936a4207c6037 Mon Sep 17 00:00:00 2001 From: Conor Wright Date: Mon, 11 Jun 2018 15:53:52 -0400 Subject: [PATCH] Fix datepicker input clear (#1729) (#1730) --- .../datepicker/datepicker-demo.component.html | 6 +++- .../datepicker/datepicker-demo.component.ts | 4 +++ .../datepicker/datepicker-input.directive.ts | 10 +++--- .../datepicker/datepicker.component.spec.ts | 33 +++++++++++++++++-- 4 files changed, 46 insertions(+), 7 deletions(-) diff --git a/src/demos/datepicker/datepicker-demo.component.html b/src/demos/datepicker/datepicker-demo.component.html index c93cec8d0..dd828e38f 100644 --- a/src/demos/datepicker/datepicker-demo.component.html +++ b/src/demos/datepicker/datepicker-demo.component.html @@ -26,5 +26,9 @@
- Selected date is {{selectedDate}} + Selected date is {{ selectedDate }}
+ +

+ +

diff --git a/src/demos/datepicker/datepicker-demo.component.ts b/src/demos/datepicker/datepicker-demo.component.ts index 6ea76f13e..d67880d3b 100644 --- a/src/demos/datepicker/datepicker-demo.component.ts +++ b/src/demos/datepicker/datepicker-demo.component.ts @@ -8,4 +8,8 @@ export class SkyDatepickerDemoComponent { public minDate: Date; public maxDate: Date; public selectedDate: Date; + + public clearSelectedDate(): void { + this.selectedDate = undefined; + } } diff --git a/src/modules/datepicker/datepicker-input.directive.ts b/src/modules/datepicker/datepicker-input.directive.ts index a2c5f32cb..2cace17c0 100644 --- a/src/modules/datepicker/datepicker-input.directive.ts +++ b/src/modules/datepicker/datepicker-input.directive.ts @@ -145,17 +145,19 @@ export class SkyDatepickerInputDirective implements public registerOnValidatorChange(fn: () => void): void { this._validatorChange = fn; } public writeValue(value: any) { - - if (value && this.dateFormatter.dateIsValid(value)) { + if (this.dateFormatter.dateIsValid(value)) { this.modelValue = value; } else if (value) { this.modelValue = this.dateFormatter.getDateFromString(value, this.dateFormat); if (value !== this.modelValue && this.dateFormatter.dateIsValid(this.modelValue)) { this._onChange(this.modelValue); } + } else { + this.modelValue = value; + this._onChange(this.modelValue); } - if (this.dateFormatter.dateIsValid(this.modelValue)) { + if (this.dateFormatter.dateIsValid(this.modelValue) || !this.modelValue) { this.writeModelValue(this.modelValue); } else if (value) { this.renderer.setElementProperty( @@ -213,7 +215,7 @@ export class SkyDatepickerInputDirective implements this.renderer.setElementProperty( this.elRef.nativeElement, 'value', - this.dateFormatter.format(model, this.dateFormat)); + model ? this.dateFormatter.format(model, this.dateFormat) : ''); this.skyDatepickerInput.setSelectedDate(model); } diff --git a/src/modules/datepicker/datepicker.component.spec.ts b/src/modules/datepicker/datepicker.component.spec.ts index c4ad34c60..26f74e426 100644 --- a/src/modules/datepicker/datepicker.component.spec.ts +++ b/src/modules/datepicker/datepicker.component.spec.ts @@ -127,6 +127,8 @@ describe('datepicker', () => { nativeElement = fixture.nativeElement as HTMLElement; component = fixture.componentInstance; + fixture.detectChanges(); + tick(); fixture.detectChanges(); setInput(nativeElement, '5/12/2017', fixture); @@ -284,16 +286,19 @@ describe('datepicker', () => { }); describe('input change', () => { - it('should handle input change with a string with the expected format', fakeAsync(() => { fixture.detectChanges(); + tick(); + fixture.detectChanges(); + setInput(nativeElement, '5/12/2017', fixture); expect(nativeElement.querySelector('input').value).toBe('05/12/2017'); expect(component.selectedDate).toEqual(new Date('5/12/2017')); - })); it('should handle input change with a ISO string', fakeAsync(() => { + fixture.detectChanges(); + tick(); fixture.detectChanges(); setInput(nativeElement, '2009-06-15T00:00:01', fixture); expect(nativeElement.querySelector('input').value).toBe('06/15/2009'); @@ -302,6 +307,8 @@ describe('datepicker', () => { })); it('should handle input change with an ISO string with offset', fakeAsync(() => { + fixture.detectChanges(); + tick(); fixture.detectChanges(); setInput(nativeElement, '1994-11-05T08:15:30-05:00', fixture); @@ -312,6 +319,8 @@ describe('datepicker', () => { })); it('should handle two digit years', fakeAsync(() => { + fixture.detectChanges(); + tick(); fixture.detectChanges(); setInput(nativeElement, '5/12/98', fixture); @@ -320,7 +329,25 @@ describe('datepicker', () => { expect(component.selectedDate).toEqual(new Date('05/12/1998')); })); + it('should handle undefined date', fakeAsync(() => { + component.selectedDate = '5/12/17'; + + fixture.detectChanges(); + tick(); + fixture.detectChanges(); + + component.selectedDate = undefined; + fixture.detectChanges(); + tick(); + fixture.detectChanges(); + + expect(nativeElement.querySelector('input').value).toBe(''); + expect(nativeElement.querySelector('input')).not.toHaveCssClass('ng-invalid'); + })); + it('should pass date to calendar', fakeAsync(() => { + fixture.detectChanges(); + tick(); fixture.detectChanges(); setInput(nativeElement, '5/12/2017', fixture); @@ -341,6 +368,8 @@ describe('datepicker', () => { it('should handle a dateFormat on the input different than the default', fakeAsync(() => { component.format = 'DD/MM/YYYY'; fixture.detectChanges(); + tick(); + fixture.detectChanges(); setInput(nativeElement, '5/12/2017', fixture);