Question

我有一个日期范围选择器，并且我试图将周末设置为禁用，但前提是该应用处于特定状态。为简化此操作，在我的示例中，我将属性datesDisabled最初设置为true，并带有一个用于切换布尔值的按钮。

我希望启用错误的日期，但是我不确定如何执行此操作。我在ng-bootstrap站点上找到了用于禁用日期的禁用代码，这很好用，但是作为Angular的新手，我不确定如何仅在特定状态下使此功能生效，而不是完全禁用应用程序启动时的运行时间。

StackBlitz： https://stackblitz.com/edit/angular-so3wkd

组件的相关部分：

export class NgbdDatepickerRange {

  hoveredDate: NgbDate;

  fromDate: NgbDate;
  toDate: NgbDate;

  datesDisabled: true;

  constructor(calendar: NgbCalendar, config: NgbDatepickerConfig) {
    this.fromDate = calendar.getToday();
    this.toDate = calendar.getNext(calendar.getToday(), 'd', 10);
    config.markDisabled = (date: NgbDate) => calendar.getWeekday(date) >= 6;
  }

Answer 1

请参阅我的解决方案：Stackblitz

<ngb-datepicker #dp .... [markDisabled]="markDisabled">

您只需在HTML内为markDisabled定义一个变量。

markDisabled将由功能disableDays（）触发：

disableDays() {
  if(this.datesDisabled) {
    this.datesDisabled = false;
    this.markDisabled = (date: NgbDate) => { return false };
  } else {
    this.datesDisabled = true;
    this.markDisabled = (date: NgbDate) => { return this.calendar.getWeekday(date) >= 6 };
  }  
}

Answer 2

1]创建一个model.ts文件。在其中定义

minDate：date.getDate（）

2]在您的日期时间picker.ts文件中，编写如下功能

writeValue（newModel：string）{ 如果（newModel）{ this.datetime = Object.assign（this.datetime，DateTimeModel.fromLocalString（newModel））; this.dateString = newModel; this.setDateStringModel（）; this.minDate = Object.assign（this.minDate，DateTimeModel.fromLocalString（newModel））; }其他{ this.datetime = new DateTimeModel（）; } }

3]将HTML文件中的mindate绑定为[minDate] =“ minDate”

工作正常.....一切顺利

NGB-Datepicker-根据状态禁用日期

2 个答案: