What Is Datepicker?
Datepicker allows us to enter a date as input
text or pick a date from calendar.
What Is Min and Max Date
Validation?
The min and max are the date properties which
used to validate the input range and these properties will disable before and
after dates on the calendar popup. For example, Click Min and Max Date validation..
How to Disabling parts of the Datepicker?
We can disable the Datepicker input text, popups
and many more by adding the disabled property.
In the below example, we can see the how to
disable datepicker's input text, popups and completely disabled.
Result Looks like - https://stackblitz.com/edit/angular-bltofp
For Example,
datepicker-disabled.html
-
<!-- Datepicker Completely
disabled-->
<div>
<mat-form-field
style="width:260px;">
<input
matInput [matDatepicker]="dp1"
placeholder="Datepicker
Completely disabled." disabled>
<mat-datepicker-toggle
matSuffix [for]="dp1"></mat-datepicker-toggle>
<mat-datepicker
#dp1></mat-datepicker>
</mat-form-field>
</div>
<!-- Datepicker's Popup
disabled-->
<div>
<mat-form-field
style="width:260px;">
<input
matInput [matDatepicker]="dp5"
placeholder="Datepicker's
Popup disabled.">
<mat-datepicker-toggle
matSuffix [for]="dp5"
disabled></mat-datepicker-toggle>
<mat-datepicker
#dp5></mat-datepicker>
</mat-form-field>
</div>
<!-- Datepicker's Input
disabled-->
<div>
<mat-form-field
style="width:260px;">
<input
matInput [matDatepicker]="dp3"
placeholder="Datepicker's
Input disabled." disabled>
<mat-datepicker-toggle
matSuffix [for]="dp3"></mat-datepicker-toggle>
<mat-datepicker
#dp3 disabled="false"></mat-datepicker>
</mat-form-field>
</div>
datepicker-disabled.ts
–
import
{Component} from
'@angular/core';
/** @Disabled datepicker */
@Component({
selector:
'datepicker-disabled',
templateUrl:
'datepicker-disabled.html'
})
export
class DatepickerDisabled
{}
And
app.module.ts –
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
{DatepickerDisabled} from
'./app/datepicker-disabled';
@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 DemoMaterialModule
{}
@NgModule({
imports:
[
BrowserModule,
BrowserAnimationsModule,
FormsModule,
HttpModule,
HttpClientModule,
DemoMaterialModule,
MatNativeDateModule,
ReactiveFormsModule,
],
entryComponents:
[DatepickerDisabled],
declarations:
[DatepickerDisabled],
bootstrap:
[DatepickerDisabled],
providers:
[]
})
export
class AppModule {}
platformBrowserDynamic().bootstrapModule(AppModule);
Result Looks like - https://stackblitz.com/edit/angular-bltofp
I hope you are enjoying with this post! Please
share with you friends! Thank you!!