我如何在ngx-bootstrap / datepicker中设置选定的日期，当在公共html输入中单击图标时启动该日期？

Question

我有一个通用的HTMLdateinput，在它旁边有一个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);
}