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 is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..
|
