Как я могу сделать это с помощью ng-bootstrap

Question

Я работаю с этим примером: https://stackblitz.com/edit/angular-ytr3qa

Мне нужно добавить три функции.

Во-первых, я считаю, что это относительно класса, тип в этом примере , если дата выходит за пределы минимальной или максимальной даты, день «деактивируется» другим цветом.Все мои попытки воспроизвести эффект были ошибками.

Хотелось бы, чтобы так и было:

Вторая особенность была бывызывать средство выбора даты только при нажатии кнопки.

Третья функция - это бизнес-правило, при выборе «dateFrom» я хотел бы изменить настройку, чтобы максимум «dateTo» был домесяц из "dateFrom" выбран.

К третьей функции я пробовал это:

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};
  }
}

Но возвращает ошибку:

Ошибка:Невозможно установить свойство 'maxDate' из неопределенного

Это также можно увидеть в https://stackblitz.com/edit/angular-ytr3qa

Answer 1

(1) если дата выходит за пределы минимальной или максимальной даты, день «деактивируется» другим цветом ... проверьте функцию 'checkAndColorOldDate' в нижеприведенном классе NgbdDatepickerRange и обновите свой 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), вы можете поиграть со свойством display для достижения видимости выбора даты при нажатии кнопки

(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";}
  }

}