我有一个普通的 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>
如何将所选日期存储在组件的变量中,然后以某种方式使输入用它更新其值?
谢谢!
最佳答案
使用 [(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);
}
关于angular - 我如何在 ngx-bootstrap/datepicker 中设置选定的日期,当点击一个图标进入一个常见的 html 输入时,它会启动?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58159099/