Question

我知道可以使用datesDisabled的{{1}}属性在ngx-bootsrap Datepicker中禁用日期。

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

即具有类似

的属性

bsConfig

然后仍应在日期选择器中启用的唯一日期应为datesEnabled = [ new Date('2019-03-21'), new Date('2018-03-21') ]和2019-03-21。

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

更新

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

Answer 1

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

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

这就是您需要解决的问题

工作代码：

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

log4j.logger.org.hibernate=INFO, hb
log4j.logger.org.hibernate.SQL=DEBUG
log4j.logger.org.hibernate.type=TRACE

log4j.appender.hb=org.apache.log4j.ConsoleAppender
log4j.appender.hb.layout=org.apache.log4j.PatternLayout

Answer 2

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

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

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

在Datepicker中仅允许特定日期

3 个答案: