角度材料日期选择器禁用年份选择 [英] Angular Material Date picker disable the year selection

问题描述

我正在尝试禁用角度材料日期选择器中的年份选择.

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.

从'@angular/material'导入{NativeDateAdapter};

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

推荐答案

来自angular material docs;

From the angular material docs;

与任何标准 一样，可以通过添加 disabled 属性来禁用日期选择器输入.默认情况下， 和 将从 继承它们的禁用状态>，但这可以通过在 datepicker 或 toggle 元素上设置 disabled 属性来覆盖.如果您想禁用文本输入但允许通过日历进行选择，这会很有用，反之亦然.

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

这篇关于角度材料日期选择器禁用年份选择的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！