python ruby-programming-language Smalltalk Vue.js Knockoutjs TypeScript JavaScript, OOPs JavaScript Angular 7, Interview Questions Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 4 Angular 2 AngularJs 1.x NodeJs Perl Programming R Programming RequireJs Rust Programming Backbonejs closure programming language go-programming-language kotlin-programming-language
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

Hi there! Welcome to my blog. My name is Anil Singh. I'm a author of this blog. For more detail about me, kindly refer to this link..
My Blogs - http://code-sample.com and http://code-sample.xyz
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

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