Merge pull request #769 from SapanaTangoe/bug_date_picker_reset

[Bug] Datepicker Not Resetting Correctly
mobi · Mar 22, 2021 · 0a986a8 · 0a986a8
2 parents adc15ff + 702f96e
commit 0a986a8
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 16 deletions.
diff --git a/projects/go-lib/src/lib/components/go-datepicker/go-datepicker.component.spec.ts b/projects/go-lib/src/lib/components/go-datepicker/go-datepicker.component.spec.ts
@@ -136,6 +136,14 @@ describe('GoDatepickerComponent', () => {
 
       fixture.detectChanges();
       expect(component.control.value).toEqual(new Date(2015, 4, 16));
+    });
+
+        it("should reset control ", () => {
+      component.control.setValue("09/16/2016");
+      component.control.reset();
+
+      fixture.detectChanges();
+      expect(component.control.value).toEqual(null);
     });
   });
 

diff --git a/projects/go-lib/src/lib/components/go-datepicker/go-datepicker.component.ts b/projects/go-lib/src/lib/components/go-datepicker/go-datepicker.component.ts
@@ -55,10 +55,15 @@ export class GoDatepickerComponent implements OnDestroy, OnInit {
     }
 
     this.subscription = this.control.valueChanges.subscribe((value: Date) => {
-      if (!value && this.selectedDate) {
-        this.control.setErrors([{ message: 'format is invalid' }]);
-      } else if (value) {
-        this.selectedDate = LocaleFormat.formatDate(value, this.locale);
+      if (!value) {
+        this.selectedDate = null;
+      } else {
+        const dateValid: boolean = (value instanceof Date) && LocaleFormat.validDate(value.getMonth(), value.getDay(), value.getFullYear());
+        if (!dateValid) {
+          this.control.setErrors([{ message: 'format is invalid' }]);
+        } else {
+          this.selectedDate = LocaleFormat.formatDate(value, this.locale);
+        }
       }
     });
   }

diff --git a/...res/ui-kit/components/form-docs/components/datepicker-docs/datepicker-docs.component.html b/...res/ui-kit/components/form-docs/components/datepicker-docs/datepicker-docs.component.html
@@ -477,36 +477,47 @@ <h4 class="go-heading-4 go-heading--underlined">Code</h4>
     </div>
   </go-card>
 
-  <go-card id="form-datepicker-append-to-body" class="go-column go-column--100">
+
+  <!-- Datepicker reset -->
+  <go-card id="form-datepicker-reset-date" class="go-column go-column--100">
     <ng-container go-card-header>
-      <h2 class="go-heading-2 go-heading--no-wrap">Component appendTo</h2>
-      <go-copy cardId="form-datepicker-append-to-content" goCopyCardLink></go-copy>
+      <h2 class="go-heading-2 go-heading--no-wrap">Component Reset Date</h2>
+      <go-copy cardId="form-datepicker-reset-date" goCopyCardLink></go-copy>
     </ng-container>
     <div class="go-container" go-card-content>
       <div class="go-column go-column--100">
         <p class="go-body-copy go-body-copy--no-margin">
-          The <code class="code-block--inline">@Input() appendTo: string;</code> binding is useful when implementing a
-          <code class="code-block--inline">go-datepicker</code> within a <code class="code-block--inline">go-modal</code>.
-          Setting <code class="code-block--inline">appendTo</code> to <code class="code-block--inline">'body'</code> will prevent
-          the modal from closing automatically upon selecting an item from the select dropdown.
+          The datepicker components value attribute can be reset via
+          <code class="code-block--inline">this.form.reset()</code>
         </p>
       </div>
+
       <div class="go-column go-column--100 go-column--no-padding">
         <div class="go-container">
           <div class="go-column go-column--50">
             <h4 class="go-heading-4 go-heading--underlined">View</h4>
-            <go-button (handleClick)="openModal()">Click Me</go-button>
+            <go-datepicker [control]="dobReset" label="Date of Birth">
+            </go-datepicker>
+            <br />
+            <go-button (handleClick)="resetDate()" buttonVariant="secondary"
+              >Clear Me</go-button
+            >
           </div>
           <div class="go-column go-column--50">
             <h4 class="go-heading-4 go-heading--underlined">Code</h4>
+            <h6>datepickerReset.html</h6>
             <code
-              [highlight]="appendToBodyExample"
-              class="code-block--no-bottom-margin">
+              [highlight]="resetDateExample_html"
+              class="code-block--no-bottom-margin"
+            >
             </code>
+            <br />
+            <h6>datepickerReset.ts</h6>
+            <code [highlight]="resetDateExample_ts"> </code>
           </div>
         </div>
       </div>
     </div>
-
-  </go-card>
+  </go-card>  
+
 </section>
diff --git a/...tures/ui-kit/components/form-docs/components/datepicker-docs/datepicker-docs.component.ts b/...tures/ui-kit/components/form-docs/components/datepicker-docs/datepicker-docs.component.ts
@@ -19,6 +19,7 @@ export class DatepickerDocsComponent implements OnInit {
   locale: FormControl = new FormControl('');
   max: FormControl = new FormControl('');
   min: FormControl = new FormControl('');
+  dobReset: FormControl = new FormControl('2015-08-15');
 
   hints: Array<string> = [
     'Please enter your date of birth',
@@ -166,6 +167,22 @@ export class DatepickerDocsComponent implements OnInit {
   }
   `;
 
+  resetDateExample_html: string = `
+  <go-datepicker
+    [control]="dobReset"
+    label="Date of Birth">
+  </go-datepicker>
+
+   <go-button (handleClick)="resetDate()"
+   buttonVariant="secondary">
+   Clear Me </go-button>
+  `;
+  resetDateExample_ts: string = `
+  resetDate(): void {
+    this.dobReset.reset();
+  }
+  `;
+
   constructor(
     private subNavService: SubNavService,
     private goModalService: GoModalService
@@ -201,4 +218,8 @@ export class DatepickerDocsComponent implements OnInit {
       }
     );
   }
+
+  resetDate(): void {
+    this.dobReset.reset();
+  }
 }