按下输入按钮时 ngbDatepicker 不起作用 [英] ngbDatepicker not working when enter button it pressed

问题描述

我正在使用 ngbDatepicker，它仅在我从下拉列表中选择日期时才有效.但是，如果我通过键盘更改日期并按 Enter 键，则什么也不会发生.

<输入名称=日期选择器"类=形式控制"ngbDatepicker#datepicker="ngbDatepicker"[autoClose]="'外面'"(dateSelect)="onDateSelection($event)"[displayMonths]="2"[dayTemplate]="t"外面的日子=隐藏"[开始日期]="从日期"><ng-template #t let-date let-focused="focused"><span class="custom-day"[class.focused]="聚焦"[class.range]="isRange(date)"[class.faded]="isHovered(date) || isInside(date)"(mouseenter)="hoveredDate = 日期"(mouseleave)="hoveredDate = null">{{ date.day }}</span></ng-模板>

在组件中:

isHovered(date: NgbDate) {返回 this.fromDate &&!this.toDate &&this.hoveredDate &&date.after(this.fromDate) &&date.before(this.hoveredDate);}isInside(日期:NgbDate){返回 date.after(this.fromDate) &&date.before(this.toDate);}isRange(日期:NgbDate){返回 date.equals(this.fromDate) ||date.equals(this.toDate) ||this.isInside(date) ||this.isHovered(日期);}验证输入(当前值:NgbDate，输入:字符串):NgbDate {const parsed = this.formatter.parse(input);返回解析的 &&this.calendar.isValid(NgbDate.from(parsed)) ?NgbDate.from(parsed) : currentValue;}

在组件中:

onDateSelection(date: NgbDate) {如果 (!this.fromDate && !this.toDate) {this.fromDate = 日期；this.emitFromDate();} else if (this.fromDate && !this.toDate && date.after(this.fromDate)) {this.toDate = 日期；this.emitToDate();} 别的 {this.toDate = null;this.fromDate = 日期；this.emitFromDate();}}

有没有人遇到过这种情况并且能够让它工作?

解决方案

来自 ngx-bootstrap 的输入元素是动态创建的，似乎没有提供与它们交互的界面.

作为一种变通方法，您可以检索对这些输入的引用(在 ngAfterViewInit 中)并将侦听器绑定到关键事件，如下所示

component.ts

ngAfterViewInit(){让 dpFrom = document.querySelector('input[name=dpFromDate]');this.renderer.listen(dpFrom,"keydown", (evt: KeyboardEvent)=>{if(evt.key=='回车'){console.log('从选择日期开始', this.fromDate);}});让 dpTo = document.querySelector('input[name=dpToDate]');this.renderer.listen(dpTo,"keydown", (evt: KeyboardEvent)=>{if(evt.key=='回车'){console.log('选择日期', this.toDate);}})}

这是一个stackblitz 示例

I am using ngbDatepicker and it works only if I select the date from the dropdown. However if I change the date via keyboard and press enter nothing happens.

<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>

in the component:

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;
    }

in component:

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();
        }
    }

Has anyone encountered this and was able to get it to work?

解决方案

Input elements from ngx-bootstrap are created dynamically and don't seem to provide an interface to interact with them.

As a work around, you can retrieve a reference on these inputs (in ngAfterViewInit) and manyally bind a listener to key events, like below

component.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);
      }

    })

}

Here is a stackblitz example

这篇关于按下输入按钮时 ngbDatepicker 不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！