Datepicker

mat-datepicker for single date and range selection.

Basic Datepicker

Single date selection with a toggle button.

Code
<mat-form-field appearance="outline" class="w-full max-w-xs">
  <mat-label>Choose a date</mat-label>
  <input matInput [matDatepicker]="picker" [(ngModel)]="selectedDate" />
  <mat-datepicker-toggle matIconSuffix [for]="picker" />
  <mat-datepicker #picker />
</mat-form-field>

Date Range Picker

Select a start and end date with mat-date-range-picker.

–
Code
<mat-form-field appearance="outline" class="w-full max-w-xs">
  <mat-label>Date range</mat-label>
  <mat-date-range-input [rangePicker]="rangePicker">
    <input matStartDate [(ngModel)]="startDate" placeholder="Start date" />
    <input matEndDate [(ngModel)]="endDate" placeholder="End date" />
  </mat-date-range-input>
  <mat-datepicker-toggle matIconSuffix [for]="rangePicker" />
  <mat-date-range-picker #rangePicker />
</mat-form-field>