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 –