Javascript 为应用程序全局设置typescript中Angular 8中日期选择器的日期最小值和最大值限制

我是Angular 8的新手，尝试为应用程序全局设置datepicker的最小和最大日期。我想使用format-datepicker.ts设置日期，是否有任何方法可以实现同样的效果

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

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

这是我的角度代码

格式化日期选择器.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({
  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}
  ]
})

汽车信息组件.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({
  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}
  ]
})

汽车信息组件.html

            <mat-grid-tile colspan=1 rowspan=1>
                <div class="car-datepicker">
                    <input  placeholder="Enter Car Start Date"
                            [matDatepicker]="busstart"
                            formControlName="busStrtDt">       
                    <mat-datepicker #busstart></mat-datepicker>
                    <button mat-icon-button (click)="busstart.open()">
                        <mat-icon>event</mat-icon>
                    </button>
                </div>
            </mat-grid-tile>

事件

我不知道如何设置最小和最大日期，因此日期选项在2017年1月1日和2010年1月31日之间变灰

这样做有可能吗

---

谢谢

在ts组件中声明minDate和maxDate变量：

minDate：日期=新日期（2017年1月1日）
maxDate:Date=新日期（2020年12月31日）

现在，在html文档中，使用[min]和[max]属性来控制日期选择器：

---

[min]=“minDate”[max]=“maxDate”

你看过这篇文章吗。看起来您需要在输入标记上设置最小和最大属性我正在寻找一种通过应用程序全局设置的方法。在组件中提供最小和最大日期。jsa[max]不限制输入，它可能有助于验证，但它不会限制用户输入5位数的年份，即使最大值设置为2999-12-31