allow clear date in the date-picker component

Upon clear, the date value is set to `undefined`.

cypress/e2e/date-picker.cy.ts

@@ -28,7 +28,7 @@ describe('date-picker tests', () => {
   it('should click outside and close', () => {
     cy.get('#date-picker8').click();
     cy.get('date-picker ngb-datepicker').should('have.class', 'show');
-    cy.get('#date8').click({force: true});
+    cy.get('#date8').click({ force: true });
     cy.get('date-picker ngb-datepicker').should('not.exist');
   });
 
@@ -76,4 +76,30 @@ describe('date-picker tests', () => {
     // should close calendar after picking a date
     cy.get('date-picker ngb-datepicker').should('not.exist');
   });
+
+  it('should clear date when click on Clear button', () => {
+    cy.get('#date-picker10').click();
+    cy.get('date-picker ngb-datepicker').should('have.class', 'show');
+    cy.get('date-picker ngb-datepicker .btn-primary').should(
+      'contain.text',
+      'Today'
+    );
+    cy.get('date-picker ngb-datepicker .btn-secondary').should(
+      'contain.text',
+      'Clear'
+    );
+
+    // click Today
+    const today = new Date();
+    const dateString = today.toISOString().substring(0, 10);
+    cy.get('date-picker ngb-datepicker .btn-primary').click();
+    cy.get('date-picker ngb-datepicker').should('not.exist');
+    cy.get('#date10').invoke('text').should('contain', dateString);
+
+    // click Clear
+    cy.get('#date-picker10').click();
+    cy.get('date-picker ngb-datepicker .btn-secondary').click();
+    cy.get('date-picker ngb-datepicker').should('not.exist');
+    cy.get('#date10').should('contain.text', '');
+  });
 });

projects/uiowa/date-range-picker/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uiowa/date-range-picker",
-  "version": "7.3.1",
+  "version": "7.4.1",
   "author": "Changhui Xu <[email protected]>",
   "contributors": [
     "Jacob Feuerbach <[email protected]>"

projects/uiowa/date-range-picker/src/lib/date-picker/date-picker.component.html

@@ -13,7 +13,8 @@
     [maxDate]="ngbMaxDate"
     [markDisabled]="isDisabled"
     [firstDayOfWeek]="7"
-    [dayTemplate]="t"
+    [dayTemplate]="dayTemplate"
+    [footerTemplate]="footerTemplate"
     readonly
     (keydown.enter)="d.toggle()"
     (dateSelect)="onDateChange($event)"
@@ -41,7 +42,7 @@
 </div>
 
 <ng-template
-  #t
+  #dayTemplate
   let-date="date"
   let-disabled="disabled"
   let-currentMonth="currentMonth"
@@ -55,3 +56,21 @@
     {{ date.day }}
   </span>
 </ng-template>
+
+<ng-template #footerTemplate>
+  <div *ngIf="allowClear">
+    <hr class="my-0" />
+    <button
+      class="btn btn-primary btn-sm m-2 float-start"
+      (click)="ngbDate = today; onDateChange(today); d.close()"
+    >
+      Today
+    </button>
+    <button
+      class="btn btn-secondary btn-sm m-2 float-end"
+      (click)="ngbDate = null; dateChange.emit(undefined); d.close()"
+    >
+      Clear
+    </button>
+  </div>
+</ng-template>

projects/uiowa/date-range-picker/src/lib/date-picker/date-picker.component.ts

@@ -9,6 +9,7 @@ import {
   ChangeDetectionStrategy,
 } from '@angular/core';
 import {
+  NgbCalendar,
   NgbDate,
   NgbDateNativeAdapter,
   NgbDateStruct,
@@ -29,15 +30,20 @@ export class DatePickerComponent implements OnInit, OnChanges {
   @Input() minDate?: Date;
   @Input() maxDate?: Date;
   @Input() isInvalid = false;
+  @Input() allowClear = false;
 
   @Output()
   dateChange = new EventEmitter<Date>();
 
   ngbDate: NgbDate | null = null;
   ngbMinDate!: NgbDateStruct;
   ngbMaxDate!: NgbDateStruct;
+  today = this.calendar.getToday();
 
-  constructor(private readonly dateAdapter: NgbDateNativeAdapter) {}
+  constructor(
+    private readonly dateAdapter: NgbDateNativeAdapter,
+    private calendar: NgbCalendar
+  ) {}
 
   ngOnInit() {
     this.ngbDate = NgbDate.from(this.dateAdapter.fromModel(this.date));

src/app/app.component.html

@@ -80,6 +80,16 @@
       <pre id="date8">{{ date8 | json }}</pre>
       <hr />
     </section>
+    <section id="date-picker2" class="col-12 col-sm-6 col-lg-4 mb-4">
+      <label for="date-picker10" class="fw-bold">Date Picker Example2</label>
+      <date-picker
+        [id]="'date-picker10'"
+        [(date)]="date10"
+        [allowClear]="true"
+      ></date-picker>
+      <pre id="date10">{{ date10 | json }}</pre>
+      <hr />
+    </section>
   </div>
   <div class="row">
     <section id="date-time-input" class="col-12 mb-4">

src/app/app.component.ts

@@ -20,6 +20,7 @@ export class AppComponent implements OnInit {
 
   min8 = new Date(2018, 0, 15);
   date8 = new Date(2018, 0, 24);
+  date10: Date | null = new Date(2022, 7, 24);
   date9 = new Date(2022, 6, 24, 22, 45, 42);
   min9 = new Date(2022, 6, 23);
   invalid = false;