Как я могу установить выбранную дату в ngx-bootstrap / datepicker, который запускается при щелчке значка в общем вводе html?

Question

У меня есть общий HTML date input, а рядом с ним есть значок font-awesome. Этот значок имеет функцию запуска bsDatePicker, однако выбранная дата нигде не сохраняется. Я хотел бы знать, как я могу сделать так, чтобы выбранная дата переносилась на ввод даты?

Это HTML-код:

//this is the common html input
<input type="date" class="form-control">

//and this is the fa icon that launches the calendar
<em #dp="bsDatepicker" bsDatepicker class="fa fa-search"></em>

Как сохранить выбранную дату впеременная в моем компоненте, а затем каким-то образом заставить вход обновлять свое значение вместе с ним?

Спасибо!

Answer 1

Используйте [(bsValue)]="date", чтобы привязать значение указателя даты начальной загрузки к переменной, и [value]="date | date: 'yyyy-MM-dd'", чтобы привязать значение ввода даты к той же переменной:

<input type="date" class="form-control" [value]="date | date: 'yyyy-MM-dd'">
<em #dp="bsDatepicker" bsDatepicker class="fa fa-search" [(bsValue)]="date"></em>

Рабочая демонстрация: https://stackblitz.com/edit/ngx-bootstrap-datepicker-uqz2hr

Обратите внимание, что input использует одностороннюю привязку, поэтому обновление даты во входных данных не изменит значение переменной (вы можете изменить ее только с помощью средства выбора даты). Если вы хотите, чтобы изменения во входе также были сохранены, вам нужно добавить что-то вроде этого:

<input type="date" class="form-control" [value]="date | date: 'yyyy-MM-dd'" 
       (input)="parseDate($event.target.value)">

и в ts:

public parseDate(e) {
  this.date = new Date(e);
}