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

Question

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

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

这是 html 代码的片段：

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

angular代码是这样的：

 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

好的，因为我的评论实际上是正确的，所以实际上我们应该使用 on blur 事件而不是使用 onchange 事件

<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 事件

How do I determine final ValueChange event on Kendo Angular DatePicker

kendo-ui

angularjs

kendo-datepicker