在 Angular 8 中为应用程序全局设置打字稿中 DatePicker 的日期最小值和最大值限制

Question

我对 Angular 8 非常陌生，并试图为应用程序全局设置日期选择器的最小和最大日期。我想使用 format-datepicker.ts 设置日期，有什么方法可以实现相同的目标。

最小日期：2017 年 1 月 1 日最大日期：2020 年 12 月 31 日

任何想法或建议都会有所帮助。

这是我的 Angular 代码

格式-datepicker.ts

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

export class CarDateAdapter extends NativeDateAdapter {

    /**

     * Formats the date as per the display format.

     * 

     * @param date The date

     * @param displayFormat The display format 

     */

    format(date: Date, displayFormat: Object): string {

        if(displayFormat === 'input') {

            let dayOfMonth : string = date.toLocaleDateString('default', { day: 'numeric' });

            let monthOfYear :  string = date.toLocaleDateString('default', { month: 'long' }).substring(0, 3);

            let year : number = date.getFullYear();

            return `${monthOfYear} ${dayOfMonth}, ${year}`;

        }

        return date.toDateString();

    }

}

export const DATE_FORMATS: MatDateFormats = {

    parse: {

        dateInput : { month: 'long', year: 'numeric', day: 'long'  }

    },

    display: {

        dateInput: 'input',

        monthYearLabel: { year: 'numeric', month: 'long' },

        dateA11yLabel: { year: 'numeric', month: 'long', day: 'long' },

        monthYearA11yLabel: { year: 'numeric', month: 'long' }

    }

}

汽车信息.component.ts

@Component({

  selector: 'car-info',

  templateUrl: './car-info.component.html',

  styleUrls: ['./car-info.component.scss'],

  providers: [

    {provide: DateAdapter, useClass: CarDateAdapter},

    {provide: MAT_DATE_FORMATS, useValue: DATE_FORMATS}

  ]

})

我很困惑如何设置最小和最大日期，这样日期选项在 2017 年 1 月 1 日和 2010 年 3 月 31 日之间变灰。

甚至有可能这样做。

Answer 1

在您的 ts 组件中声明minDate和maxDate变量：minDate: Date = new Date (2017, 1, 1); <br>maxDate: Date = new Date (2020, 12, 31); <br>现在，在 html 文档中，使用 [min] 和 [max] 属性来控制您的日期选择器：[min]="minDate" [max]="maxDate"