diff --git a/cypress/e2e/date-picker.cy.ts b/cypress/e2e/date-picker.cy.ts
index f7379cb..09819de 100644
--- a/cypress/e2e/date-picker.cy.ts
+++ b/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', '');
+  });
 });
diff --git a/projects/uiowa/date-range-picker/package.json b/projects/uiowa/date-range-picker/package.json
index eb43f62..e4eb69b 100644
--- a/projects/uiowa/date-range-picker/package.json
+++ b/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 <changhui-xu@uiowa.edu>",
   "contributors": [
     "Jacob Feuerbach <jacob-feuerbach@uiowa.edu>"
diff --git a/projects/uiowa/date-range-picker/src/lib/date-picker/date-picker.component.html b/projects/uiowa/date-range-picker/src/lib/date-picker/date-picker.component.html
index 8d231b4..3cf5248 100644
--- a/projects/uiowa/date-range-picker/src/lib/date-picker/date-picker.component.html
+++ b/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>
diff --git a/projects/uiowa/date-range-picker/src/lib/date-picker/date-picker.component.ts b/projects/uiowa/date-range-picker/src/lib/date-picker/date-picker.component.ts
index 09ce0aa..5086e4a 100644
--- a/projects/uiowa/date-range-picker/src/lib/date-picker/date-picker.component.ts
+++ b/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,6 +30,7 @@ export class DatePickerComponent implements OnInit, OnChanges {
   @Input() minDate?: Date;
   @Input() maxDate?: Date;
   @Input() isInvalid = false;
+  @Input() allowClear = false;
 
   @Output()
   dateChange = new EventEmitter<Date>();
@@ -36,8 +38,12 @@ export class DatePickerComponent implements OnInit, OnChanges {
   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));
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 5d36bb0..a22f97d 100644
--- a/src/app/app.component.html
+++ b/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">
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 98b9dd4..4892f96 100644
--- a/src/app/app.component.ts
+++ b/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;