Datepicker input clear fix (#1729)

* Resolving Card action bar still visable after hiding with *ngIf #1421 * Addressed PR style comments * updated demo with clear button * added datepicker support for undefined values
blackbaud · Jun 8, 2018 · a4e2e08 · a4e2e08
1 parent e333e82
commit a4e2e08
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 7 deletions.
diff --git a/src/demos/datepicker/datepicker-demo.component.html b/src/demos/datepicker/datepicker-demo.component.html
@@ -26,5 +26,9 @@
 </div>
 
 <div>
-  Selected date is {{selectedDate}}
+  Selected date is {{ selectedDate }}
 </div>
+
+<p>
+  <button class='sky-btn sky-btn-secondary' (click)="clearSelectedDate()">Clear</button>
+</p>
diff --git 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() {
+    this.selectedDate = undefined;
+  }
 }
diff --git 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
@@ -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);