Question

我正在使用angular2的mydatepicker，我正在使用我的网站的datepicker在2个日期的范围内发出请愿。但是我需要做一些验证，比如初始日期不是在最后日期之后，反之，最后日期不能在最初的日期之前。

so reading the documentation，我发现在选项对象中我可以设置这些属性，问题是它们不起作用，至少不是实时的，如果我从它们工作的开始修复它们，但是这对我的网站没用。

这是html模板：

<div class="col-md-5" style="float: right">

    <my-date-picker name="mydate" placeholder="Fecha final" [(options)]="optionsFechaFinal" (dateChanged)="onDateChanged($event,1)" required></my-date-picker>

</div>

<div class="col-md-5" style="float: right">

    <my-date-picker name="mydate2" placeholder="Fecha inicial" [(options)]="optionsFechaInicial" (dateChanged)="onDateChanged($event,0)" required></my-date-picker>

</div>

和角度代码：

 private optionsFechaInicial: IMyOptions = {
    // other options...
    dayLabels: { su: "Do", mo: "Lu", tu: "Ma", we: "Mi", th: "Ju", fr: "Vi", sa: "Sa" },
    monthLabels: { 1: "Ene", 2: "Feb", 3: "Mar", 4: "Abr", 5: "May", 6: "Jun", 7: "Jul", 8: "Ago", 9: "Sep", 10: "Oct", 11: "Nov", 12: "Dic" },
    todayBtnTxt: "Hoy",
    firstDayOfWeek: "mo",
    sunHighlight: true,
    dateFormat: 'dd/mm/yyyy',
    selectionTxtFontSize: '13px',
    height: '30px'
  };

  private optionsFechaFinal: IMyOptions = {
    // other options...
    dayLabels: { su: "Do", mo: "Lu", tu: "Ma", we: "Mi", th: "Ju", fr: "Vi", sa: "Sa" },
    monthLabels: { 1: "Ene", 2: "Feb", 3: "Mar", 4: "Abr", 5: "May", 6: "Jun", 7: "Jul", 8: "Ago", 9: "Sep", 10: "Oct", 11: "Nov", 12: "Dic" },
    todayBtnTxt: "Hoy",
    firstDayOfWeek: "mo",
    sunHighlight: true,
    dateFormat: 'dd/mm/yyyy',
    selectionTxtFontSize: '13px',
    height: '30px'
  };

/*some code not relevant*/


  onDateChanged(event: IMyDateModel, datepicker: number) {

    //datepicker inicial
    if (datepicker == 0) {
      this.optionsFechaFinal.disableUntil = event.date;
      this.initialDate = Date.parse(event.date.year + '-' + event.date.month + '-' + event.date.day) / 1000;
      console.log(this.optionsFechaFinal.disableUntil);
      //datepicker final
    } else if (datepicker == 1) {

      this.optionsFechaInicial.disableSince = event.date;
      this.finalDate = Date.parse(event.date.year + '-' + event.date.month + '-' + event.date.day) / 1000;
    }


  }

我不确定我错过了什么，代码有什么问题？

Answer 1

您必须更改对整个Options Object的引用，如下所示：

if (datepicker == 0) {
    this.optionsFechaFinal = {
    // other options...
      disableUntil = event.date;
    };
...
}

你不能改变对象选项。

当然这不是正确的解决方案。首先，您必须复制没有引用的对象选项以避免代码重复，然后添加必要的属性。

Answer 2

有一个选项可以使用disableSince和disableUntil选项在某个日期之前和之后禁用datepicker

onDateChanged(event: IMyDateModel, datepicker: number) {
    if (datepicker == 0) {
      this.optionsFechaFinal = {
            disableUntil : {year:event.date.year,month:event.date.month,day:event.date.day
           };
      this.initialDate = Date.parse(event.date.year + '-' + event.date.month + '-' + event.date.day) / 1000;}
    } else if (datepicker == 1) {

      this.optionsFechaInicial{
            disableSince : {year:event.date.year,month:event.date.month,day:event.date.day
          };
        };
      this.finalDate = Date.parse(event.date.year + '-' + event.date.month + '-' + event.date.day) / 1000;
    }
  }

Angular2 mydatepicker disableSince选项不起作用

2 个答案: