Разрешить только определенные даты в Datepicker

Question

Я знаю, что есть возможность отключить даты в ngx-bootsrap Datepicker с помощью свойства datesDisabled bsConfig.

В любом случае, мне было интересно, возможно ли это сделать и с противоположной: разрешать только определенные даты?

, т. е. с таким свойством, как

datesEnabled = [ new Date('2019-03-21'), new Date('2018-03-21') ]

Единственными датами, которые все еще должны быть включены в указателе даты, как это, должны быть 2019-03-21 и 2018-03-21.

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

ОБНОВЛЕНИЕ

• Iобновил массив примеров, чтобы показать, что я ищу решение для дат, которые полностью независимы от eachother
• Я создал запрос функции на github: https://github.com/valor-software/ngx-bootstrap/issues/5121

Answer 1

К сожалению, в официальной документации нет такого свойства, как enabledDates

https://valor -software.com / ngx-bootstrap / # / datepicker # date-disabled

Итак, вот обходной путь для вашей потребности

Рабочий код :

https://stackblitz.com/edit/angular-xxzzex

    export class AppComponent   implements OnInit{
  name = 'Angular'; 
  millisecondPerDay = 24 * 60 * 60 * 1000;
  disabledDates = [];
  enabledDates = [ new Date('2019-03-15'), new Date('2019-03-17'), new Date('2019-03-11') ]

 ngOnInit() {
    this.GetDisabledDates(this.enabledDates);
  }

  GetDisabledDates(excludeDates: Array<Date>)
  {
    var now = new Date();
    var startDate:Date = new Date(now.setFullYear(now.getFullYear() - 1));
    var endDate:Date = new Date(now.setFullYear(now.getFullYear() + 2));//change as per your need
    console.log(startDate);
    console.log(endDate);
    this.disabledDates = [];
    do{
      var found = false;
      for(var i=0;i<excludeDates.length;i++)
      {
        var excludeDate: Date = excludeDates[i];
        if(this.IsSameDay(excludeDate,startDate))
        {
          found = true;
        }        
      }
      if(!found)
      {
        this.disabledDates.push(startDate);
      }     
      startDate = new Date((startDate.getTime() + this.millisecondPerDay));
    }while(startDate <= endDate)
    console.log("Calculated: "+this.disabledDates.length);
    //console.log("Calculated: "+this.disabledDates);
  }

  IsSameDay(date1:Date, date2:Date)
  {
    if(date1.getFullYear() == date2.getFullYear() && date1.getMonth() == date2.getMonth() && date1.getDate() == date2.getDate())
    {
      return true;
    }
    else
    {
      return false;
    }
  }
}

Answer 2

Файл multi-date-picker.html очень похож на диапазон DatePicker ng-bootstrap

<!-- we not use (select)="onDateSelection($event)"-->
<ngb-datepicker #dp  [displayMonths]="2" [dayTemplate]="t">
</ngb-datepicker>

<ng-template #t let-date="date" let-focused="focused">
  <!--we use (click) event pass the event and the date-->
  <span class="custom-day" (click)="onDateSelection($event,date)"
        [class.focused]="focused"
        [class.range]="isFrom(date) || isTo(date) || isInside(date) || 
isHovered(date)"
        [class.faded]="isHovered(date) || isInside(date)"
        <!--add a class.selected if the date belong to our dates selected -->
        [class.selected]="isDateSelected(date)"
        (mouseenter)="hoveredDate = date"
        (mouseleave)="hoveredDate = null">
    {{ date.day }}
  </span>
</ng-template>

добавить функции isDateSelected (), addRangeDate () и addDate ().

//return true if is selected
isDateSelected(date:NgbDateStruct)
{
    return (this.datesSelected.findIndex(f=>f.day==date.day && f.month==date.month && f.year==date.year)>=0);
}
addRangeDate(fromDate:NgbDateStruct,toDate:NgbDateStruct)
{
    //We get the getTime() of the dates from and to
    let from=new Date(fromDate.year+"-"+fromDate.month+"-"+fromDate.day).getTime();
    let to=new Date(toDate.year+"-"+toDate.month+"-"+toDate.day).getTime();
    for (let time=from;time<=to;time+=(24*60*60*1000)) //add one day
    {
        let date=new Date(time);
        //javascript getMonth give 0 to January, 1, to February...
        this.addDate({year:date.getFullYear(),month:date.getMonth()+1,day:date.getDate()});
    }   
    this.datesSelectedChange.emit(this.datesSelected);
}
addDate(date:NgbDateStruct)
{
  let index=this.datesSelected.findIndex(f=>f.day==date.day && f.month==date.month && f.year==date.year);
  if (index>=0)       //If exist, remove the date
    this.datesSelected.splice(index,1);
  else   //a simple push
    this.datesSelected.push(date);
}

для использования, просто:

<ngb-multi-date-picker [datesSelected]="datesSelected"
     (datesSelectedChange)="change($event)"></ngb-multi-date-picker>

и

export class AppComponent 
{
    datesSelected:NgbDateStruct[]=[]; 
    change(value:NgbDateStruct[])
    {
        this.datesSelected=value;
    }

это Ссылка окончательный код.

Answer 3

В вашем html-файле

<input class="form-control"
       placeholder="Daterangepicker"
       ngModel
       bsDaterangepicker
       [minDate]="minDate"
       [maxDate]="maxDate">

В вашем ts-файле

this.minDate = new Date();
this.maxDate = new Date();
this.minDate.setDate(this.minDate.getDate() - 1);
this.maxDate.setDate(this.maxDate.getDate() + 7);

На основе документации Angular Bootstrap. Здесь - документация для минимальной и максимальной даты.