Angular Material Date picker disable the year selection

Question

I am trying to disable the year selection in angular material date picker.

I've created custom native date adapter to dispaly the date when selected from the date picker. In this case year is disable so user can't able to change the year.

import { NativeDateAdapter } from '@angular/material';

export class AppDateAdapter extends NativeDateAdapter {
  months = [
    'Jan',
    'Feb',
    'Mar',
    'Apr',
    'May',
    'Jun',
    'Jul',
    'Aug',
    'Sep',
    'Oct',
    'Nov',
    'Dec'
  ];

  format(date: Date, displayFormat: Object): string {
    if (displayFormat === 'input') {
      const day = date.getDate();
      const month = this.months[date.getMonth()]; // date.getMonth() + 1;
      const year = date.getFullYear();
      let days: any;
      if (day <= 9) {
        days = '0' + day;
      } else {
        days = day;
      }
      return `${days}` + '-' + `${month}` + '-' + `${year}`;
    }
    return date.toDateString();
  }
}

please, can you show how you have build the custom native date adapter? — Enea Dume, Jan 19 '19 at 11:02
Custom date adapter purpose is only to display the date when selected from the date picker import { NativeDateAdapter } from '@angular/material'; export class AppDateAdapter extends NativeDateAdapter {months = [ 'Jan','Feb','Mar', 'Apr','May', 'Jun','Jul','Aug','Sep','Oct','Nov','Dec' ];format(date: Date, displayFormat: Object): string {if (displayFormat === 'input') {const day = date.getDate();const month = this.months[date.getMonth()]; // date.getMonth() + 1; const year = date.getFullYear();return `${day}` + '-' + `${month}` + '-' + `${year}`;}return date.toDateString();}} — aryan, Jan 19 '19 at 11:04
@aryan please edit your original post with your code put in a code block. — Ploppy, Jan 19 '19 at 11:19

score 0 · Answer 1 · answered Jan 19 '19 at 11:15

0

From the angular material docs;

As with any standard <input>, it is possible to disable the datepicker input by adding the disabled property. By default, the <mat-datepicker> and <mat-datepicker-toggle> will inherit their disabled state from the <input>, but this can be overridden by setting the disabled property on the datepicker or toggle elements. This can be useful if you want to disable text input but allow selection via the calendar or vice-versa.

<p>
  <mat-form-field>
    <input matInput [matDatepicker]="dp1" placeholder="Completely disabled" disabled>
    <mat-datepicker-toggle matSuffix [for]="dp1"></mat-datepicker-toggle>
    <mat-datepicker #dp1></mat-datepicker>
  </mat-form-field>
</p>

<p>
  <mat-form-field>
    <input matInput [matDatepicker]="dp2" placeholder="Popup disabled">
    <mat-datepicker-toggle matSuffix [for]="dp2" disabled></mat-datepicker-toggle>
    <mat-datepicker #dp2></mat-datepicker>
  </mat-form-field>
</p>

<p>
  <mat-form-field>
    <input matInput [matDatepicker]="dp3" placeholder="Input disabled" disabled>
    <mat-datepicker-toggle matSuffix [for]="dp3"></mat-datepicker-toggle>
    <mat-datepicker #dp3 disabled="false"></mat-datepicker>
  </mat-form-field>
</p>

for further information please see:

https://material.angular.io/components/datepicker/overview

answered Jan 19 '19 at 11:15

Seyhmus Gokcen

248
4
10

Able to allow the user to select or enter anything in textbox however when the popup is open that time no need to show the year field or disabled the year button – aryan Jan 19 '19 at 11:24
it is possible duplicate to: https://stackoverflow.com/questions/53595066/angular-material-7-datepicker-disable-multi-year-view – Seyhmus Gokcen Jan 19 '19 at 11:25
stackblitz example throwing errors. it is not working – aryan Jan 19 '19 at 11:42
Could you please provide the stackblitz example's link? – Seyhmus Gokcen Jan 19 '19 at 11:44
https://stackblitz.com/angular/jrjdyyyaqgb?file=app%2Fdatepicker-custom-header-example.ts – aryan Jan 19 '19 at 12:20
sorry for the delay; https://stackblitz.com/edit/angular-xgn1te just check and compare to your stackblitz. I left the right and left arrows as html input button to see the customization. – Seyhmus Gokcen Jan 20 '19 at 00:28

Angular Material Date picker disable the year selection

1 Answers1

Linked