angular - ngbDatepicker 在按下输入按钮时不起作用
问题描述
我正在使用 ngbDatepicker,它仅在我从下拉列表中选择日期时才有效。但是,如果我通过键盘更改日期并按 Enter,则不会发生任何事情。
<div class="input-group">
<input name="datepicker"
class="form-control"
ngbDatepicker
#datepicker="ngbDatepicker"
[autoClose]="'outside'"
(dateSelect)="onDateSelection($event)"
[displayMonths]="2"
[dayTemplate]="t"
outsideDays="hidden"
[startDate]="fromDate">
<ng-template #t let-date let-focused="focused">
<span class="custom-day"
[class.focused]="focused"
[class.range]="isRange(date)"
[class.faded]="isHovered(date) || isInside(date)"
(mouseenter)="hoveredDate = date"
(mouseleave)="hoveredDate = null">
{{ date.day }}
</span>
</ng-template>
在组件中:
isHovered(date: NgbDate) {
return this.fromDate && !this.toDate && this.hoveredDate && date.after(this.fromDate) && date.before(this.hoveredDate);
}
isInside(date: NgbDate) {
return date.after(this.fromDate) && date.before(this.toDate);
}
isRange(date: NgbDate) {
return date.equals(this.fromDate) || date.equals(this.toDate) || this.isInside(date) || this.isHovered(date);
}
validateInput(currentValue: NgbDate, input: string): NgbDate {
const parsed = this.formatter.parse(input);
return parsed && this.calendar.isValid(NgbDate.from(parsed)) ? NgbDate.from(parsed) : currentValue;
}
在组件中:
onDateSelection(date: NgbDate) {
if (!this.fromDate && !this.toDate) {
this.fromDate = date;
this.emitFromDate();
} else if (this.fromDate && !this.toDate && date.after(this.fromDate)) {
this.toDate = date;
this.emitToDate();
} else {
this.toDate = null;
this.fromDate = date;
this.emitFromDate();
}
}
有没有人遇到过这个并且能够让它工作?
解决方案
来自 ngx-bootstrap 的输入元素是动态创建的,似乎没有提供与它们交互的接口。
作为一种解决方法,您可以检索这些输入的引用 (in ngAfterViewInit
) 并将侦听器绑定到键事件,如下所示
组件.ts
ngAfterViewInit()
{
let dpFrom = document.querySelector('input[name=dpFromDate]');
this.renderer.listen(dpFrom,"keydown", (evt: KeyboardEvent)=>
{
if(evt.key=='Enter')
{
console.log('From date selected', this.fromDate);
}
});
let dpTo = document.querySelector('input[name=dpToDate]');
this.renderer.listen(dpTo,"keydown", (evt: KeyboardEvent)=>
{
if(evt.key=='Enter')
{
console.log('To date selected', this.toDate);
}
})
}
这是一个stackblitz示例
推荐阅读
- java - 为什么这种时间复杂度较小的排序算法耗时较长?(已编辑)
- c# - 异常未被第一次捕获,而是由顶级捕获处理
- python - 如何使用字符串输入来确定文件名?
- angular - Angular - 如何从 HTTP POST 正确返回 JSON 响应
- amazon-s3 - 如何判断 S3 上的密钥是否“达到最终一致性”
- python - 我可以使用 python 打开通过 PowerBI WEB 创建的微软数据连接文件 (.odc) 吗?
- r - 来自 NBA 网站的 JSON URL 不再工作
- powershell - 如何使用 Powershell Core 并行处理安装?
- linux - vkEnumeratePhysicalDevices 如何检索有关系统配置的信息?
- python - 使用 Python 3.x 对 Zendesk API 的 GET 请求失败,HTTP 代码 401 Unauthorized