angular - 我如何在 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" 将 Bootstrap 日期选择器的值绑定(bind)到变量和 [value]="date | date: 'yyyy-MM-dd '" 将日期输入的值绑定(bind)到同一个变量:

<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 使用单向绑定(bind)，因此更新输入中的日期不会更改变量的值(您只能使用日期选择器更改它)。如果您还希望保存输入中的更改，则需要添加如下内容:

<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);
}