Question

我正在使用此示例：https://stackblitz.com/edit/angular-ytr3qa

我需要添加三个功能。

首先，我相信它与课程type in this example相关，如果日期超出最短或最长日期，那么这一天就会被取消＆＃34;停用＆＃34;用不同的颜色。我尝试重现这种效果都是缺陷。

我希望它能保持这种状态：

第二个功能是仅在单击按钮时调用datepicker。

第三个功能是业务规则，在选择＆＃34; dateFrom＆＃34;时，我想将设置更改为＆＃34; dateTo＆＃34;从＆＃34; dateFrom＆＃34;到最多一个月地选择。

对于第三个功能，我试过这个：

onDateSelection(date: NgbDateStruct, config: NgbDatepickerConfig) {
  if (!this.fromDate && !this.toDate) {
    this.fromDate = date;
    config.maxDate = {year: date.year, month: date.month + 1, day: date.day};
  } else if (this.fromDate && !this.toDate && after(date, this.fromDate)) {
    this.toDate = date;
  } else {
    this.toDate = null;
    this.fromDate = date;
    config.maxDate = {year: date.year, month: date.month + 1, day: date.day};
  }
}

但是返回错误：

错误错误：无法设置属性＆＃39; maxDate＆＃39;未定义的

这也可以在https://stackblitz.com/edit/angular-ytr3qa

中看到

Answer 1

（1）如果日期超出了最小或最大日期，则该日期将以不同的颜色“停用” ... 在下面的NgbdDatepickerRange类中检查函数'checkAndColorOldDate'并更新您的datepicker-config.html文件（注意[ngStyle]）

<ng-template #t let-date="date" let-focused="focused">  <span class="custom-day" [class.focused]="focused" [class.range]="isFrom(date) || isTo(date) || isInside(date) || isHovered(date)"
[class.faded]="isHovered(date) || isInside(date)" [ngStyle]="{ 'background': checkAndColorOldDate(date) } ">
{{ date.day }}  </span> </ng-template>

（2）您可以使用显示属性进行播放，单击按钮即可获得日期选择器的可见性

（3）单击日期时，您只能将toDate设置为fromDate的一个月内的日期...选中此函数，该函数应替换NgbdDatepickerRange类中的现有函数（在datepicker-config.ts中文件）

    export class NgbdDatepickerRange {
moldel; 
  hoveredDate: NgbDateStruct;

  fromDate: NgbDateStruct;
  toDate: NgbDateStruct;
  todayY:number;
  todayM:number;
  todayD:number;
  isDisabled:any;

  constructor(calendar: NgbCalendar, private config: NgbDatepickerConfig) {
    let today = calendar.getToday();
        config.minDate = today;
        config.maxDate = {year: today.year + 1, month: today.month, day: today.day};
        config.outsideDays = 'hidden';
        this.todayY = today.year;
        this.todayM = today.month;
        this.todayD = today.day;
        this.config.maxDate = {year: this.todayY, month: this.todayM + 1, day: this.todayD};
  }

  onDateSelection(date: NgbDateStruct) {
      if (!this.fromDate && !this.toDate) {
      console.log("inside onDateSelection - condition 1");
      this.fromDate = date;
      this.config.maxDate = {year: date.year, month: date.month + 1, day: date.day};
    } else if (this.fromDate && !this.toDate && after(date, this.fromDate)) {
        this.config.maxDate = {year: this.fromDate.year, month: this.fromDate.month + 1, day: this.fromDate.day};
        if (
            after(this.config.maxDate, date)
        ){
            this.toDate = date;
        }
        else { 
            console.log("inside onDateSelection - condition 2b... can't go more than a month from the to-date");
        }
    } else {
      this.toDate = null;
      this.fromDate = date;
      this.config.maxDate = {year: date.year, month: date.month + 1, day: date.day};
    }
  }

  isHovered = date => this.fromDate && !this.toDate && this.hoveredDate && after(date, this.fromDate) && before(date, this.hoveredDate);
  isInside = date => after(date, this.fromDate) && before(date, this.toDate);
  isFrom = date => equals(date, this.fromDate);
  isTo = date => equals(date, this.toDate);

  checkAndColorOldDate(date:any){

      if(
          (date.day <this.todayD && date.month == this.todayM && date.year == this.todayY) ||
      (date.month < this.todayM && date.year == this.todayY) ||
      (date.year < this.todayY)
      ){
          return "red";
      }
      else if (
        after(date, this.config.maxDate)
      ){ return "yellow";}
  }

}

我怎么能用ng-bootstrap做这些事情

1 个答案: