在 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}
  ]
})

汽车信息.component.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 年 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"

Answer 2

我正在寻找相同的功能，而 DateAdaptor 没有属性来全局设置最小和最大日期； 我认为最好的解决方案是制作一个实现 datepicker 或显示它的自定义组件，该组件必须像 @Emmanuel 所说的那样具有最小和最大日期，并将其传递给 datepicker 最大和最小日期属性。

目前，我在 github 上创建了一个问题以了解是否存在某些设置： https : //github.com/h2qutc/angular-material-components/issues/213