Skip to content

Instantly share code, notes, and snippets.

@jhades

jhades/01.html

Last active February 10, 2022 10:13
Show Gist options
  • Save jhades/0509b6be014c3e8a6d93d2cc1d87c5a8 to your computer and use it in GitHub Desktop.
Save jhades/0509b6be014c3e8a6d93d2cc1d87c5a8 to your computer and use it in GitHub Desktop.
Download ZIP
Angular Material Datepicker
Raw
01.html
<mat-form-field appearance="outline">
<input matInput formControlName="releasedAt">
</mat-form-field>
Raw
02.html
<mat-form-field appearance="outline">
<input matInput formControlName="releasedAt" [matDatepicker]="releasedAtPicker">
<mat-datepicker #releasedAtPicker>
</mat-datepicker>
</mat-form-field>
Raw
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>
Raw
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>
Raw
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>
Raw
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>
Raw
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>
Raw
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>
Raw
09.html
<mat-calendar [(selected)]="selectedDate">
</mat-calendar>
<p>selected Date: {{selectedDate}}</p>
Raw
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>
Raw
11.html
<mat-datepicker #releasedAtPicker color="accent">
</mat-datepicker>
Raw
12.html
dateClass: MatCalendarCellClassFunction<Date> = (cellDate, view) => {
const date = cellDate.getDate();
if (view == 'month') {
return (date == 1) ? 'highlight-date' : "";
}
return "";
}
Raw
14.html
<mat-datepicker #releasedAtPicker [dateClass]="dateClass">
</mat-datepicker>
Raw
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>
Raw
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.
};
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment