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!!
|
Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..
|
