仅允许Datepicker中的特定日期

Question

我知道有可能通过使用qazxsw poi的qazxsw poi属性来禁用ngx-bootstrap Datepicker中的日期。

无论如何，我想知道是否有可能反过来：只允许特定日期？

即拥有像这样的财产

datesDisabled

仍然应该像这样在datepicker中启用的唯一日期应该是bsConfig和datesEnabled = [ new Date('2019-03-21'), new Date('2018-03-21') ] 。

我已经尝试在2019-03-21中使用lambda表达式，但似乎没有任何效果。

UPDATE

• 我更新了示例数组，以表明我正在寻找完全独立于彼此的日期解决方案
• 我在github上创建了一个功能请求：2018-03-21

Answer 1

不幸的是，官方文档中没有像enabledDates这样的属性

datesDisabled

所以这里是你需要的工作

工作代码：

https://github.com/valor-software/ngx-bootstrap/issues/5121

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

Answer 2

在你的HTML文件上

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

在你的ts文件上

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

基于Angular Bootstrap文档。

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

是最小和最大日期的文档。

Answer 3

multi-date-picker.html与ng-bootstrap datepicker范围非常相似

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

添加函数isDateSelected（），addRangeDate（）和addDate（）。

Here

仅供参考：

<!-- 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>

和

//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>

最终代码。