The Angular Datepicker allows us to enter a date in the text input box by choosing a date from the date calendar.
The Angular date-picker lie of three main parts -
1. The Input field
2. The Popup Trigger
3. The Calendar Popup
Example –
@Component({...})
class MyDatepicker {
date = new Date();
}
And
<md-input-container>
<input mdInput [mdDatepicker]="picker" [(ngModel)]="date">
<md-datepicker-toggle mdSuffix [for]="picker"></md-datepicker-toggle>
</md-input-container>
<md-datepicker #picker></md-datepicker>
Other Examples Are - Using Angular DateAdapter to achieve the datepicker and events.
<input [matDatepicker]="datepicker">
<mat-datepicker #datepicker></mat-datepicker>
Optional datepicker toggle button –
<input [matDatepicker]="datepicker">
<mat-datepicker-toggle [for]="datepicker"></mat-datepicker-toggle>
<mat-datepicker #datepicker></mat-datepicker>
A Prefix or Suffix on the material input –
<mat-form-field>
<input matInput [matDatepicker]="datepicker">
<mat-datepicker-toggle matSuffix [for]="datepicker"></mat-datepicker-toggle>
<mat-datepicker #datepicker></mat-datepicker>
</mat-form-field>
Input and change events –
<input [matDatepicker]="d" (dateInput)="onInput($event)" (dateChange)="onChange($event)">
<mat-datepicker #d></mat-datepicker>
The modules include providers for DateAdapter looks like –
@NgModule({
imports: [MatDatepickerModule, MatNativeDateModule],
})
export class MyApp {
//App Infofo here.
}
The component class looks like -
@Component({...})
export class MyComponent {
@ViewChild(MatDatepicker) datepicker: MatDatepicker<Date>;
}
How To Customizing the Date implementation?
Example for Customizing the Date -
@NgModule({
imports: [MatDatepickerModule],
providers: [
{provide: DateAdapter, useClass: MyDateAdapter},
{provide: MAT_DATE_FORMATS, useValue: MY_DATE_FORMATS},
],
})
export class MyApp {
//app information here..
}
Result looks like –
I hope you are enjoying with this post! Please share with you friends. Thank you!!