Angular 2 在日期选择器中禁用特定日期

Question

我在尝试禁用日期选择器中的某些日期时遇到了一些问题。我在打字稿中自定义的日期选择器如下：

import { DateFormatter } from './ng2-bootstrap/date-formatter';
import { DatePickerComponent } from './ng2-bootstrap/datepicker.component';
import * as moment from 'moment-timezone';

@Component({
    selector: '[acn-datepicker-popup]',
    templateUrl: './datepicker-popup.component.html',
    inputs: [],
    host: {}
})
export class DatepickerPopupComponent implements OnInit {
    @Input() datepickerDirective: any;
    @Input() minDate: moment.Moment;
    @Input() maxYears: number;
    @Input() alignRight: boolean = false;
    @Input() disabledDates: string;

    private dateFormat: string = 'DD/MM/YYYY';
    private earliestDate: string = '01/01/1970';
    
    datePickerCmp: DatePickerComponent;
    datepickerFormControl: FormControl;
    selectedDate: moment.Moment;
    dateFormatter: DateFormatter = new DateFormatter();
    
    constructor(private _datePickerCmp: DatePickerComponent, @Inject('datepickerFormControl') private _datepickerFormControl: FormControl) {
        this.datePickerCmp = _datePickerCmp;
        this.datepickerFormControl = _datepickerFormControl;
        if (this.datepickerFormControl.value && this.dateFormatter.isValid(this.datepickerFormControl.value, this.dateFormat)) {
            this.selectedDate = moment(this.datepickerFormControl.value, this.dateFormat);
        }    
    }

    ngOnInit() {
        var splits = this.disabledDates.toString().split(";");
        for(let i = 0; i < splits.length; i++){
            console.log("Dates" + splits[i]);
        }
    }

我在 HTML 中的日期选择器组件：

<div class="col-sm-6 form-group has-feedback">
        <label for="testDte">TEST DATE<span class="text-danger">*</span></label>
        <div class="input-group" [(datepicker-popup)]="bookingModel.controls.testDte" [disabledDates]="bkDatesListStr">
            <input type="text" [formControl]="bookingModel.controls.testDte" class="form-control"  maxlength="10" style="border-right:transparent">
            <span class="input-group-btn" align="right">
                <button class="btn btn-square btn-white-primary form-control" type="button"><i class="fa fa-calendar"></i></button>
            </span>
        </div>
    </div>

我设法在 ngOnInit() 中传递了要禁用的日期。 splits 变量包含要在日期选择器中灰显的日期列表。但是，我不知道如何在日期选择器中设置要禁用的日期。有什么想法吗？

谢谢！

Answer 1

我会给你一个如何禁用特定日期的简单示例。

首先，我们需要在 Angular 应用程序中安装 Material Design 主题。所以让我们像下面这样添加：

ng add @angular/material

Ts 文件：

import { Component } from '@angular/core';
  
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
    title = 'my-app';
  
    myHolidayDates = [
                    new Date("12/1/2020"),
                    new Date("12/20/2020"),
                    new Date("12/17/2020"),
                    new Date("12/25/2020"),
                    new Date("12/4/2020"),
                    new Date("12/7/2020"),
                    new Date("12/12/2020"),
                    new Date("12/11/2020"),
                    new Date("12/26/2020"),
                    new Date("12/25/2020")
                ];
  
    myHolidayFilter = (d: Date): boolean => {
        const time=d.getTime();
        return !this.myHolidayDates.find(x=>x.getTime()==time);
    }
}

现在在视图文件中，我们将使用 datepicker 编写输入元素的代码，如下所示：

<h1>Angular Material Disable specific dates</h1>
     
<mat-form-field>
  <input matInput [matDatepicker]="picker" [matDatepickerFilter]="myHolidayFilter" placeholder="Choose a date">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker ></mat-datepicker>
</mat-form-field>

试试这个方法。