只允许 Datepicker 中的特定日期

Question

我知道可以使用 bsConfig.

的 datesDisabled 属性禁用 ngx-bootsrap Datepicker 中的日期

无论如何，我想知道是否也可以相反：只允许特定日期？

即属性喜欢

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

像这样在日期选择器中仍应启用的唯一日期应该是 2019-03-21 和 2018-03-21。

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

更新

我更新了示例数组以表明我正在寻找完全独立于彼此的日期的解决方案
我在 github 上创建了一个功能请求：https://github.com/valor-software/ngx-bootstrap/issues/5121

Answer 1

在你的 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 文档。 Here 是最小和最大日期的文档。

Answer 2

multi-date-picker.html 与 ng-bootstrap datepicker range

非常相似

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

这是 Link 最终代码。

Answer 3

遗憾的是官方文档中没有属性类似enabledDates

https://valor-software.com/ngx-bootstrap/#/datepicker#dates-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;
    }
  }
}

只允许 Datepicker 中的特定日期

Allowing only specific dates in Datepicker

ngx-bootstrap

angular