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 5 Material Date Validation

Angular 5 Material Date Validations - Disabling parts of the Datepicker

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.

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);

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