Question

是棱角分明的新手，使用棱角分明的材料进行设计。想要在角材料中禁用周末和特定日期。提前谢谢。

app.component.html

<mat-form-field>
  <input matInput [matDatepicker]="picker" placeholder="Choose a date">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

的package.json

"dependencies": {
    "@angular/animations": "^5.1.3",
    "@angular/cdk": "^5.0.3",
    "@angular/common": "^5.0.0",
    "@angular/compiler": "^5.0.0",
    "@angular/core": "^5.0.0",
    "@angular/forms": "^5.0.0",
    "@angular/http": "^5.0.0",
    "@angular/material": "^5.0.3",
    "@angular/platform-browser": "^5.0.0",
    "@angular/platform-browser-dynamic": "^5.0.0",
    "@angular/router": "^5.0.0",
    "core-js": "^2.4.1",
    "rxjs": "^5.5.2",
    "zone.js": "^0.8.14"
  },

Answer 1

你需要matDatepickerFilter，使用它如下：

 <mat-form-field>
     <input matInput
        [matDatepicker]="picker"
        [matDatepickerFilter]="dateFilter"
        placeholder="Choose a date">
     <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
     <mat-datepicker #picker></mat-datepicker>
 </mat-form-field>

并在您的组件中someComponent.ts：

@Component({...})
export class SomeComponent.ts {
...
    dateFilter = (date: Date) => date.getMonth() % 2 == 1 && date.getDate() % 2 == 0;
...
}

...代表其他一些东西，过滤只是过滤奇数月的一个例子，你可以使用any，一般它必须是返回boolean并接受的函数日期

reference example project

reference docs

如何在Angular材质中使用datepicker禁用特定日期？

1 个答案: