Как определить окончательное событие ValueChange в Kendo Angular DatePicker

Мне нужно установить минимальную и максимальную даты для Kendo Angular DatePicker. Это довольно просто, используя [(max)]="maxDate" and [(min)]="minDate", и это работает, когда вы используете мышь и щелкаете DatePicker.

Проблема в том, что при использовании ввода с клавиатуры пользователь может выбирать даты за пределами минимальной и максимальной дат. У меня есть событие 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);


    }

Полный пример плунжера находится здесь: пример плунжера


angularjs kendo-ui kendo-datepicker
person Bruce C    schedule 02.08.2017    source источник
comment
как насчет размытия? но onFirstPaymentDateChange тогда нужно получить значение из this.firstPaymentDate, я немного изменил ваш plunkr и я думаю, что это лучший способ узнать, когда пользователь закончил изменять дату   -  person himawan_r    schedule 03.08.2017
comment
Спасибо, это сработало отлично. Пожалуйста, добавьте это в качестве ответа, и я приму его,   -  person Bruce C    schedule 07.08.2017

Ответы (1)


arrow_upward
2
arrow_downward

Хорошо, поскольку мой комментарий на самом деле уместен, поэтому на самом деле вместо использования события 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

person himawan_r    schedule 08.08.2017