我如何在 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日期选择器的值绑定到一个变量，使用[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);
}

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

How can I set the selected date in ngx-bootstrap/datepicker which is launched when an icon is clicked into a common html input?

angular

ngx-bootstrap