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

class MyDatepicker {
    date = new Date();

    <input mdInput [mdDatepicker]="picker" [(ngModel)]="date">
    <md-datepicker-toggle mdSuffix [for]="picker"></md-datepicker-toggle>
<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 –
  <input matInput [matDatepicker]="datepicker">
  <mat-datepicker-toggle matSuffix [for]="datepicker"></mat-datepicker-toggle>
  <mat-datepicker #datepicker></mat-datepicker>

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 –
    imports: [MatDatepickerModule, MatNativeDateModule],
export class MyApp {
    //App Infofo here.

The component class looks like -
export class MyComponent {
  @ViewChild(MatDatepicker) datepicker: MatDatepicker<Date>;

How To Customizing the Date implementation?
Example for Customizing the Date -

    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!!

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 - and
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

You Might Also Like
Post a Comment Powered by Blogger.
ASK Questions