如何在输入字段上检测 ng-bootstrap Datepicker 中的日期选择？

Posted 2023-05-07

【中文标题】如何在输入字段上检测 ng-bootstrap Datepicker 中的日期选择？

【英文标题】：How to detect date selection in ng-bootstrap Datepicker on input field?

【发布时间】：2018-07-31 21:19:22

【问题描述】：

我们在项目中使用ng-bootstrap Datepicker as Directive：

<input class="form-control"
         name="dp" ngbDatepicker #d="ngbDatepicker" (blur)="d.close()" [(ngModel)]="model"
         (ngModelChange)="onDateSelected()">

当前行为是在选择日期选择器中的日期以及每次对输入字段进行更改时调用onDateSelected()。

期望的行为是每当用户点击日期选择器中的日期或将光标移出<input>（即模糊）时调用onDateSelected()。

我的做法是把(ngModelChange)改成(blur)：

<input class="form-control"
         name="dp" ngbDatepicker #d="ngbDatepicker" (blur)="d.close(); onDateSelected()"
         [(ngModel)]="model">

但这会导致onDateSelected()不被调用，当从日期选择器中选择一个日期时——这有点道理，因为光标不在<input>内。但是，在搜索可以调用onDateSelected() 的ng-bootstrap docs 时，我找不到某种dateSelected-Event：

<input class="form-control"
         name="dp" ngbDatepicker #d="ngbDatepicker" (blur)="d.close(); onDateSelected()"
/* missing -> */ (dateSelected)="onDateSelected()" /* <- */ [(ngModel)]="model">

有什么我想念的吗？或者也许是另一种实现这种行为的方式？我想不出是唯一一个有这个要求的人......

【参考方案1】：

同时issue已经关闭，1.1.0中会有(dateSelect)事件：https://github.com/ng-bootstrap/ng-bootstrap/pull/2254

【讨论】：

该事件仅在您使用日历选择日期时触发。不是在手动输入日期时。

我知道你的来历

@emirhosseini 我知道你的评论已经很老了，但现在 select 已被贬低，并且 dateSelect 似乎仍然没有在打字时触发

【参考方案2】：

<input class="form-control"
     name="dp" ngbDatepicker #d="ngbDatepicker" (blur)="d.close()" 
[(ngModel)]="model"
     (select)="onDateSelected()">

这将起作用，并且每当您在 datepicker 中选择日期时都会调用 onDateSelected()

【参考方案3】：

解决办法如下：

<input 
class="form-control"    
name="startDate" 
[(ngModel)]="startDate"
(dateSelect)="doSomething()"
(blur)="doSomething()"
ngbDatepicker 
#startDate="ngbDatepicker"
>

这里 (dateSelect) 处理从日历选择器中进行选择，而 (blur) 处理输入失去焦点时的手动输入。

【参考方案4】：

猜select输出方法就是你要找的。​​p>

Select：当用户使用键盘或鼠标选择日期时触发的事件。事件的payload当前选择的是NgbDateStruct。

请参考output section

【讨论】：

(select) 仅适用于 NgbDatepicker 组件。我在这里使用 NgbInputDatepicker Directive，不幸的是（select）不起作用。

从您分享的代码中，我只能看到 NgbDatepicker 被使用。你应该更新你的代码吗？

那是因为 NgbInputDatepicker 指令的选择器也是 'ngbDatepicker'：ng-bootstrap.github.io/#/components/datepicker/examples（第二个演示）还是我搞砸了？

这只会在我使用日历选择日期时触发。不是在手动输入日期时！

【参考方案5】：

使用 dateSelect 为我工作：

<input class="form-control"
     name="dp" ngbDatepicker #d="ngbDatepicker" (blur)="d.close(); ()onDateSelected()"
     [(ngModel)]="model">