Question

我正在尝试在角度材质日期选择器中禁用年份选择。

我创建了自定义本机日期适配器，以便从日期选择器中选择日期时显示日期。在这种情况下，年份是禁用的，因此用户无法更改年份。

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

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

Answer 1

来自棱角材料文档；

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

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

有关更多信息，请参见：

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

角度材料日期选择器禁用了年份选择

1 个答案: