Angular Material Datepicker

01.html

  <mat-form-field appearance="outline">

    <input matInput formControlName="releasedAt">

  </mat-form-field>

02.html

<mat-form-field appearance="outline">

  <input matInput formControlName="releasedAt" [matDatepicker]="releasedAtPicker">

  <mat-datepicker #releasedAtPicker>

  </mat-datepicker>

</mat-form-field>

03.html

<mat-form-field appearance="outline">

  <input matInput formControlName="releasedAt" [matDatepicker]="releasedAtPicker">

  <mat-datepicker-toggle matSuffix [for]="releasedAtPicker">

  </mat-datepicker-toggle>

  <mat-datepicker #releasedAtPicker>

  </mat-datepicker>

</mat-form-field>

04.html

<mat-form-field appearance="outline">

  <input matInput formControlName="releasedAt" [matDatepicker]="releasedAtPicker">

  <mat-datepicker-toggle matPrefix [for]="releasedAtPicker">
    <mat-icon matDatepickerToggleIcon>
      calendar_month
    </mat-icon>
  </mat-datepicker-toggle>

  <mat-datepicker #releasedAtPicker>

  </mat-datepicker>

</mat-form-field>

05.html

<mat-form-field appearance="outline">

  <input matInput formControlName="releasedAt" 
         [matDatepicker]="releasedAtPicker" (click)="releasedAtPicker.open()">

  <mat-datepicker-toggle matSuffix [for]="releasedAtPicker">

  </mat-datepicker-toggle>

  <mat-datepicker #releasedAtPicker>

  </mat-datepicker>

</mat-form-field>

06.html

<mat-form-field appearance="outline">

  <input matInput formControlName="releasedAt" disabled
         [matDatepicker]="releasedAtPicker">

  <mat-datepicker-toggle matSuffix [for]="releasedAtPicker" [disabled]="false">

  </mat-datepicker-toggle>

  <mat-datepicker #releasedAtPicker [disabled]="false">

  </mat-datepicker>

</mat-form-field>

07.html

<mat-form-field appearance="outline">

  <input matInput formControlName="releasedAt"
         [matDatepicker]="releasedAtPicker">

  <mat-datepicker-toggle matSuffix [for]="releasedAtPicker">

  </mat-datepicker-toggle>

  <mat-datepicker #releasedAtPicker startView="year">

  </mat-datepicker>

</mat-form-field>

08.html

<mat-form-field appearance="outline">

  <input matInput formControlName="releasedAt"
         [matDatepicker]="releasedAtPicker">

  <mat-datepicker-toggle matSuffix [for]="releasedAtPicker">

  </mat-datepicker-toggle>

  <mat-datepicker #releasedAtPicker [touchUi]="true">

  </mat-datepicker>

</mat-form-field>

09.html

<mat-calendar [(selected)]="selectedDate">

</mat-calendar>

<p>selected Date: {{selectedDate}}</p>

10.html

<mat-form-field appearance="outline">

  <input matInput formControlName="releasedAt"
         [matDatepicker]="releasedAtPicker">

  <mat-datepicker-toggle matSuffix [for]="releasedAtPicker">

  </mat-datepicker-toggle>

  <mat-datepicker #releasedAtPicker [startAt]="startDate">

  </mat-datepicker>

</mat-form-field>

11.html

<mat-datepicker #releasedAtPicker color="accent">

</mat-datepicker>

12.html

dateClass: MatCalendarCellClassFunction<Date> = (cellDate, view) => {

    const date = cellDate.getDate();

    if (view == 'month') {
        return (date == 1) ? 'highlight-date' : "";
    }

    return "";
}
  
  

14.html

<mat-datepicker #releasedAtPicker [dateClass]="dateClass">

</mat-datepicker>

15.html

<mat-form-field appearance="outline">

  <input matInput formControlName="releasedAt"
         [min]="minDate"
         [max]="maxDate"
         [matDatepicker]="releasedAtPicker">

  <mat-datepicker-toggle matSuffix [for]="releasedAtPicker">

  </mat-datepicker-toggle>

  <mat-datepicker #releasedAtPicker>

  </mat-datepicker>

</mat-form-field>

16.html

dateFilter: (date: Date | null) => boolean =
  (date: Date | null) => {
    if (!date) {
      return false;
    }
    const day = date.getDay();
    return day == 1; // 1 means monday, 0 means sunday, etc.
  };

17.html

<mat-form-field appearance="outline">

  <input matInput formControlName="releasedAt"
         [matDatepickerFilter]="dateFilter"
         [matDatepicker]="releasedAtPicker">

  <mat-datepicker-toggle matSuffix [for]="releasedAtPicker">

  </mat-datepicker-toggle>

  <mat-datepicker #releasedAtPicker>

  </mat-datepicker>

</mat-form-field>