Angular 4 and 5 Datepicker Example

Angular 4 Datepicker Example

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

Install Angular Material and Angular CDK – Installation Steps

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

Hey! I'm Anil Singh. I author this blog. I'm Active Blogger, Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
My Blogs - https://code-sample.com and https://code-sample.xyz
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

You Might Also Like
Post a Comment
www.code-sample.com/. Powered by Blogger.
ASK Questions