[英]How to detect date selection in ng-bootstrap Datepicker on input field?
We use the ng-bootstrap Datepicker as Directive in our project:我们在项目中使用ng-bootstrap Datepicker 作为指令:
<input class="form-control"
name="dp" ngbDatepicker #d="ngbDatepicker" (blur)="d.close()" [(ngModel)]="model"
(ngModelChange)="onDateSelected()">
The current behaviour is that onDateSelected()
is called when a date in the datepicker is selected, as well as every time a change is made to the input field.当前行为是在选择日期选择器中的日期时以及每次对输入字段进行更改时调用
onDateSelected()
。
The desired behaviour is that onDateSelected()
is called whenever the user clicks on a date in the datepicker or moves the cursor out of the <input>
(ie blur).所需的行为是只要用户单击日期选择器中的日期或将光标移出
<input>
(即模糊),就会调用onDateSelected()
)。
My approach was to change (ngModelChange)
to (blur)
:我的方法是将
(ngModelChange)
更改为(blur)
:
<input class="form-control"
name="dp" ngbDatepicker #d="ngbDatepicker" (blur)="d.close(); onDateSelected()"
[(ngModel)]="model">
but this leads to onDateSelected()
not being called, when a date is selected from the datepicker - which kinda makes sense, because the cursor is not inside the <input>
.但这会导致
onDateSelected()
不被调用,当从日期选择器中选择日期时 - 这有点道理,因为光标不在<input>
。 However, I could not find some sort of dateSelected
-Event when searching the ng-bootstrap docs on which I could call onDateSelected()
:但是,我找不到某种
dateSelected
搜索时-活动NG-引导文档上,我可以调用onDateSelected()
<input class="form-control"
name="dp" ngbDatepicker #d="ngbDatepicker" (blur)="d.close(); onDateSelected()"
/* missing -> */ (dateSelected)="onDateSelected()" /* <- */ [(ngModel)]="model">
Is there something I miss?有什么我想念的吗? Or maybe another way to implement this behaviour?
或者也许是实现这种行为的另一种方式? I can't think of being the only one with this requirement...
我想不出是唯一一个有这个要求的人......
同时, issue已经关闭,1.1.0 将有一个 (dateSelect) 事件: https : //github.com/ng-bootstrap/ng-bootstrap/pull/2254
<input class="form-control"
name="dp" ngbDatepicker #d="ngbDatepicker" (blur)="d.close()"
[(ngModel)]="model"
(select)="onDateSelected()">
This will work and onDateSelected()
is called whenever you select a date in datepicker这将起作用,并且每当您在
onDateSelected()
选择日期时都会调用onDateSelected()
Guess select
output method is what you are looking for.猜猜
select
输出方法是您正在寻找的。
Select: An event fired when user selects a date using keyboard or mouse.
Select:当用户使用键盘或鼠标选择日期时触发的事件。 The payload of the event is currently selected NgbDateStruct.
事件的负载当前选择的是 NgbDateStruct。
Refer the output section参考输出部分
Here is the solution:这是解决方案:
<input
class="form-control"
name="startDate"
[(ngModel)]="startDate"
(dateSelect)="doSomething()"
(blur)="doSomething()"
ngbDatepicker
#startDate="ngbDatepicker"
>
Here (dateSelect) handles choosing from the calendar picker and (blur) handles manually input when the input loses focus.这里 (dateSelect) 处理从日历选择器中进行选择, (blur) 在输入失去焦点时处理手动输入。
Using dateSelect
worked for me:使用
dateSelect
对我dateSelect
:
<input class="form-control"
name="dp" ngbDatepicker #d="ngbDatepicker" (blur)="d.close(); ()onDateSelected()"
[(ngModel)]="model">
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.