В календаре ng-bootstrap применяется отключение дней по месяцам - PullRequest
Новая
       7

В календаре ng-bootstrap применяется отключение дней по месяцам

0 голосов
/ 27 августа 2018

Могу ли я повторно применить отключение через несколько дней после инициализации страницы. у меня есть ситуация, когда я хочу повторно применить отключенные дни, зависит от того, переместил ли пользователь страницы в календаре (по месяцам). и причина в том, что мои данные о днях отключения огромны, и я хочу получить дни отключения только для пользователя календарного месяца, просматривающего.

мое событие навигации выбирает даты, но означает, что календарь уже отображается и обратный вызов уже вызван. Я не мог найти какой-либо метод, чтобы установить отключить дни после. любая помощь приложена 

.html
<input class="form-control" .. .. ngbDatepicker #d="ngbDatepicker" (navigate)="pickUpDate($event.next)">


my component

.. 

constructor(private datePickerConfig: NgbDatepickerConfig){
}

pickUpDate(monthYear){
let yearmonth = `${year}-${month}`;
this.myService.getActiveDates(yearMonth).subscribe( dates => {
  this.disableDates(dates);
})
}

disableDates(dates){
 this.datePickerConfig.markDisabled = (dateStruct:NgbDateStruct) =>{
  return dates.filter(date => {
   let dateArr: string[] = date.split("-);
   let y: number = parseInt(dateArr[0]);
   let m:number = parseInt(dateArr[1]);
   let d:number = parseInt(dateArr[2]);
   return dateStrcut.year == y && dateStruct.month == m && dateStrcut.day == d;  
   }).length == 0
};
}

1 Ответ

0 голосов
/ 27 августа 2018

Один обходной путь можно отключить на все дни и создать собственный шаблон дня. В пользовательском шаблоне дня у вас есть два пролета, один с кликом, который меняет модель, и другой, у которого нет клика.

ПРИМЕЧАНИЕ. Я моделирую поиск disableDays, используя setInterval 

export class NgbdDatepickerCustomday {
  model: NgbDateStruct;
  disableDays:NgbDateStruct[]=[];
  yet:boolean=true;
  constructor(private calendar: NgbCalendar) {
    let today:any=new Date();
    this.disableDays=this.getDisabled(today.getMonth()+1);
  }

  //ALL the days are "disabled"
  isDisabled = (date: NgbDate, current: {month: number}) => true;
  isWeekend = (date: NgbDate) =>  this.calendar.getWeekday(date) >= 6;

  //the customDisable: a day is disabled if is one day of the array "this.disableDays"
  isCustomDisable(date: NgbDate)
  {
    let day=this.disableDays.find(x=>x.year==date.year && x.month==date.month && x.day==date.day);
    return day!=undefined;

  }
  //When we navigate, we look for new disables days. I use a setnterval to
  //simulate a real getValues
  navigate(e:any)
  {
    setTimeout(()=>{
      this.disableDays=this.getDisabled(e.next.month)
    },2000)
  }

  //a fool function to change the disables days
  getDisabled(month:number):NgbDateStruct[]
  {
      let disables:NgbDateStruct[]=[];
      switch(month)
      {
        case 8:
           disables=[{year:2018,month:8,day:23}];
           break;
        case 9:
           disables=[{year:2018,month:9,day:13}];
           break;

      }
      return disables;
  }
}

.html похож на: 

<form class="form-inline">
  <div class="form-group">
    <div class="input-group">
      <input class="form-control" placeholder="yyyy-mm-dd" [markDisabled]="isDisabled"
             name="dp" [(ngModel)]="model" ngbDatepicker [dayTemplate]="customDay" #d="ngbDatepicker" (navigate)="navigate($event)">
      <div class="input-group-append">
        <button class="btn btn-outline-secondary calendar" (click)="d.toggle()" type="button"></button>
      </div>
    </div>
  </div>
</form>

<ng-template #customDay let-date="date" let-currentMonth="currentMonth" 
      let-selected="selected" let-disabled="disabled" let-focused="focused">
  <!--if is "customDisabled"-->
  <span *ngIf="isCustomDisable(date)" class="custom-day"
        [class.bg-primary]="selected"  [class.text-muted]="true">
    {{ date.day }}
  </span>
<!--if not, see that in (click) we must equal model to date 
            and close manually the calendar-->
  <span (click)="model=date;d.close()" *ngIf="!isCustomDisable(date)" class="custom-day"
        [class.bg-primary]="selected"  >
    {{ date.day }}
  </span>
</ng-template>

Вы можете увидеть стекаблиц

Если вы находитесь в августе, 23 отключено, если вы переключитесь на сентябрь, через 2 секунды 13 отключится

...