Question

我需要为Kendo Angular DatePicker设置最小和最大日期。使用[(max)]="maxDate" and [(min)]="minDate"这非常简单，这在使用鼠标并单击DatePicker时可以正常工作。

问题是当使用键盘输入时，用户可以选择最小和最大日期之外的日期。我有一个valueChange事件，但它会在每次击键时触发。我无法确定用户何时完成输入整个日期，然后根据需要将日期设置为最小值或最大值。我可以为下一个控件设置一个onFocus事件，但那将是kludgy。

这是html代码的片段：

  <kendo-datepicker 
    id="dpFirstPaymentDate" 
    (valueChange)="onFirstPaymentDateChange($event)" 
    [(value)]="firstPaymentDate" 
    [(max)]="maxDate" 
    [(min)]="minDate" 
    [(focusedDate)]="firstPaymentDate" 
    [rangeValidation] = "true" 
    title="First Payment Date">
  </kendo-datepicker>

角度代码是这样的：

 protected onFirstPaymentDateChange(/*event: EventEmitter*/ value: Date): void {

        if (value > this.maxDate) {
          // This does not appear to be working
          value = new Date(this.maxDate);
          this.firstPaymentDate = new Date(this.maxDate);
        }
        else if (value < this.minDate) {
          value = new Date(this.minDate);
          this.firstPaymentDate = new Date(this.minDate);
        }

        this.maturityDate = new Date(value);
        this.maturityDate.setMonth(value.getMonth() + this.term);


    }

这里有一个完整的plunker示例：Plunker example

Answer 1

好的，因为我的评论实际上是关键点，所以实际上我们不应该使用onchange事件来使用on blur事件

<kendo-datepicker 
    id="dpFirstPaymentDate" 
    (blur)="onFirstPaymentDateChange($event)" 
    [(value)]="firstPaymentDate" 
    [(max)]="maxDate" 
    [(min)]="minDate" 
    [(focusedDate)]="firstPaymentDate" 
    [rangeValidation] = "true" 
    title="First Payment Date">
</kendo-datepicker>

并且对onFirstPaymentDateChange函数稍作改动，因为我们没有得到日期值，可能只是用this.firstPaymentDate得到它，我们可以继续设置逻辑（最大值）。这是plnkr

中的工作示例

如何确定Kendo Angular DatePicker上的最终ValueChange事件

1 个答案: