使用日期选择器如何禁用angular6中的范围日期？

Question

有2个实体：一个是假期，另一个是 microplan 。在假期中，有2个字段。一个用于开始日期，另一个用于结束日期。在 microplan 中，只有一个字段，即microplan开始日期。我的问题是我只想禁用微计划开始日期字段中的日期，我在 holdiay 中选择的那些日期不属于微计划开始日期。就我而言，日历中的日期未禁用：

microplan.html

<div class="form-group">
    <label class="form-control-label" for="field_microplanStartDate">Microplan Start Date</label>
    <div class="input-group">
        <input id="field_microplanStartDate" [disabled]="isHoliday" type="text" class="form-control" name="microplanStartDate" ngbDatepicker  #microplanStartDateDp="ngbDatepicker" [(ngModel)]="microplan.microplanStartDate"
        />
        <span class="input-group-append">
            <button type="button" class="btn btn-secondary" (click)="microplanStartDateDp.toggle()">
                <fa-icon [icon]="'calendar-alt'"></fa-icon>
            </button>
        </span>
    </div>
</div>

microplan.ts

private getIsHoliday(holidays) {
    for (let i = 0; i < holidays.length; i++) {
        const today = new Date();
        const date1 = new Date(holidays[i].startDate._i);
        const date2 = new Date(holidays[i].endDate._i);
        const day1 = date1.getFullYear() + '' + this.getIfLess(date1.getMonth()) + '' + this.getIfLess(date1.getDate());
        const day2 = date2.getFullYear() + '' + this.getIfLess(date2.getMonth()) + '' + this.getIfLess(date2.getDate());
        const todayDate = today.getFullYear() + '' + this.getIfLess(today.getMonth()) + '' + this.getIfLess(today.getDate());
        if (todayDate >= day1) {
            if (todayDate <= day2) {
                this.isHoliday = true;
            }
        }
    }
}


private getIfLess(date) {
    if (date <= 9) {
        return '0' + date;
    } else {
        return date;
    }
}

Answer 1

您正在使用ngbDatepicker，正如我在html代码中看到的那样。它确实具有日期禁用功能。您可以查看此link。

// disable the 13th of each month
const isDisabled = (date: NgbDate, current: {
  month: number
}) => day.date === 13;

<ngb-datepicker [minDate]="{year: 2010, month: 1, day: 1}" [maxDate]="{year: 2048, month: 12, day: 31}" [markDisabled]="isDisabled">
</ngb-datepicker>

这应该对您有帮助，只需选择假日日期，并在用户插入假日日期后将其设置为微型计划日期即可。它将自动禁用。希望对您有所帮助。