Как зафиксировать изменение выбора даты Clarity - PullRequest
Новая
       33

Как зафиксировать изменение выбора даты Clarity

0 голосов
/ 19 октября 2018

Я использую двойное связывание clrDate, которое позволяет мне загружать объект Javascript Date.Однако мне нужно вызывать событие каждый раз, когда пользователь меняет дату, либо вводит новую, либо использует календарь.

Я пытался (щелкнуть), (изменить), (ngModelChange), (размытие) - но по какой-то причине ни один из них не срабатывает. 

<label for="modelDate" class="clr-control-label" >Model Date:</label>     
<input clrDate type="date" [(clrDate)]="selectedModelDate" (ngModelChange)="loadModel(false)" >

Как мне зафиксировать изменение в средстве выбора даты?

1 Ответ

0 голосов
/ 19 октября 2018

Вы можете сделать это двумя способами.

2-сторонняя привязка

В этот стек , обратите внимание, что перед нажатием кнопки выбора даты, значениеиз date1 не определено.После того, как вы выбрали дату и нажали кнопку, у нее есть значение, установленное в окне выбора даты.Это типичное двустороннее связывание в Angular. 

<section>
  <button class="btn btn-primary" (click)="logDate1()">
    Log Date Value for 2-way binding
  </button>
  <label for="date1" class="clr-control-label" > Date1:</label>     
  <input type="date" [(clrDate)]="date1" />
</section>

Обезвоженный синтаксис

Это может быть то, что вы ищете.Это почти то же самое, что и в приведенном выше примере, но мы разделяем или обесцвечиваем двухстороннее связывание, чтобы оно устанавливалось с [clrDate]=date2.Обратите внимание, что запускается событие clrDateChange, которое можно связать с logChnage($event).Это срабатывает всякий раз, когда изменяется внутреннее значение средства выбора даты (например, пользователь выбирает дату), и вы можете делать с ним любое значение в функции logChange.Это двусторонняя привязка de-sugarized.

<section>
  <h4>De-sugarized syntax</h4>
  <label for="date2" class="clr-control-label" > Date1:</label>     
  <input type="date" [clrDate]="date2" (clrDateChange)="logChange($event)"/>
</section>
...