Question

我有一个简单的视图，包含2个组件aurelia-date-picker aurelia-date-picker github 当我在第一个日历中选择日期时，在第二个日历中，我不希望在所选日期之前选择日期。我的HTML：

<template>
<require from="bootstrap/css/bootstrap.css"></require>
<form>
  Date début: <bootstrap-datepicker dp-options.bind="dpOptions1" changedate.delegate="setDateDebut($event)"></bootstrap-datepicker>
  Date de fin: <bootstrap-datepicker id="datefin" dp-options.bind="dpOptions2" changedate.delegate="setDateFin($event)">     </bootstrap-datepicker>
 </form>
 </div
</template>

我的观点模型：

export class ChoixDateDebutDateFin {
  constructor(cd, abdp){
  this.dpOptions1={
  format:"dd/mm/yyyy",
  autoclose:true,
  calendarWeeks:true,
  language:"fr-FR",
  todayHighlight:true,
  weekStart:1
}
this.dpOptions2={
  format:"dd/mm/yyyy",
  autoclose:true,
  calendarWeeks:true,
  language:"fr-FR",
  todayHighlight:true,
  weekStart:1
}
setDateDebut(e){
  var d=e.detail.event.date;
  console.log("d ?"+d);
//Here ! I want to change dynamically the property stratdate :(
  this.dpOptions2.startDate=d;
}
setDateFin(event){
  this.fin=event.detail.date;
}
}

当然，由于组件在启动时加载，因此无法正常工作，因此它不会再次查询其选项。所以问题是：

要么=＆gt;如何强制它重新加载选项？

或=＆gt;如何在启动后的给定日期之前禁用日期？

Answer 1

文档在这里： https://bootstrap-datepicker.readthedocs.io/en/stable/methods.html#setstartdate

您想在评论后将代码行更改为：

$('#datefin').setStartDate(d);

或者，如果您使用的是JQuery，则更容易：

{{1}}

根据选择的其他日期更改startdate

1 个答案: