python ruby-programming-language Smalltalk Vue.js Knockoutjs TypeScript JavaScript, OOPs JavaScript 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 5 Datepicker

Angular 5 Datepicker Form Controls - Material Tutorials

Datepicker allows us to enter a date as input text or pick a date from calendar and the datepicker example looks like -

datepicker-example.ts -
import {Component} from '@angular/core';

@Component({
  selector: 'datepicker',
  template: `<mat-form-field>
  <input matInput [matDatepicker]="datePicker" placeholder="Pick date">
  <mat-datepicker-toggle matSuffix [for]="datePicker"></mat-datepicker-toggle>
  <mat-datepicker #datePicker></mat-datepicker>
</mat-form-field>`
})
export class DatepickerExample {}

And the NgModule
import {NgModule} from '@angular/core';
import {CdkTableModule} from '@angular/cdk/table';
import {HttpClientModule} from '@angular/common/http';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {HttpModule} from '@angular/http';
import {
  MatAutocompleteModule,  MatButtonModule,
  MatButtonToggleModule,  MatCardModule,
  MatCheckboxModule,  MatChipsModule,
  MatDatepickerModule,  MatDialogModule,
  MatDividerModule,  MatExpansionModule,
  MatGridListModule,  MatIconModule,
  MatInputModule,  MatListModule,
  MatMenuModule,  MatNativeDateModule,
  MatPaginatorModule,  MatProgressBarModule,
  MatProgressSpinnerModule,  MatRadioModule,
  MatRippleModule,  MatSelectModule,
  MatSidenavModule,  MatSliderModule,
  MatSlideToggleModule,  MatSnackBarModule,
  MatSortModule,  MatStepperModule,
  MatTableModule,  MatTabsModule,
  MatToolbarModule,  MatTooltipModule,
} from '@angular/material';

import {BrowserModule} from '@angular/platform-browser';
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {DatepickerExample} from './app/datepicker/datepicker-example';

@NgModule({
  exports: [
    CdkTableModule,
    MatAutocompleteModule,
    MatButtonModule,
    MatButtonToggleModule,
    MatCardModule,
    MatCheckboxModule,
    MatChipsModule,
    MatStepperModule,
    MatDatepickerModule,
    MatDialogModule,
    MatDividerModule,
    MatExpansionModule,
    MatGridListModule,
    MatIconModule,
    MatInputModule,
    MatListModule,
    MatMenuModule,
    MatNativeDateModule,
    MatPaginatorModule,
    MatProgressBarModule,
    MatProgressSpinnerModule,
    MatRadioModule,
    MatRippleModule,
    MatSelectModule,
    MatSidenavModule,
    MatSliderModule,
    MatSlideToggleModule,
    MatSnackBarModule,
    MatSortModule,
    MatTableModule,
    MatTabsModule,
    MatToolbarModule,
    MatTooltipModule,
  ]
})
export class MaterialModule {}

@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    HttpModule,
    HttpClientModule,
    MaterialModule,
    MatNativeDateModule,
    ReactiveFormsModule,
  ],
  entryComponents: [DatepickerExample],
  declarations: [DatepickerExample],
  bootstrap: [DatepickerExample],
  providers: []
})
export class AppModule {}

platformBrowserDynamic().bootstrapModule(AppModule);


The Result Looks Like –


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