如何使用 Angular 6 禁用日期选择器中的上一个日期 - Javascript

在Angular 6中，我们可以通过dateFilters属性禁用日期选择器中的上一个日期。

以下是使用Angular 6禁用日期选择器中的过去日期的示例：

import { Component } from '@angular/core';
import { Moment } from 'moment';
import * as moment from 'moment';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  dates: Moment[] = [
    moment('2022-12-01'),
    moment('2022-12-02'),
    moment('2022-12-03'),
    moment('2022-12-04'),
    moment('2022-12-05'),
    moment('2022-12-06'),
    moment('2022-12-07'),
    moment('2022-12-08'),
    moment('2022-12-09'),
    moment('2022-12-10'),
    moment('2022-12-11'),
    moment('2022-12-12')
  ];

  disablePastDates = (date: Moment): boolean => {
    return date.isBefore(moment());
  }
}

在组件中，我们定义了一个名为dates的数组，其中包含未来的10个日期。然后，我们定义了一个名为disablePastDates的函数，该函数将Moment日期对象作为输入并返回布尔值。

在disablePastDates函数中，我们使用Moment.js来比较传递的日期是否早于当前日期。如果是，它将返回true并禁用该日期。如果不是，则返回false并允许该日期。

在模板中，我们将disablePastDates函数绑定到日历的dateFilters属性，以便禁用过去日期。以下是模板的示例代码：

<mat-calendar [dateFilter]="disablePastDates" [selected]="dates"></mat-calendar>

如上所示，我们将disablePastDates函数绑定到dateFilter属性，并将dates数组绑定到selected属性。这将在日历中显示未来日期并禁用过去日期。

以上就是如何使用Angular 6禁用日期选择器中的过去日期的详细介绍，希望对你有所帮助。