ngbDatepicker 在按下输入按钮时不起作用答案

【问题标题】：ngbDatepicker not working when enter button it pressedngbDatepicker 在按下输入按钮时不起作用
【发布时间】：2020-03-20 09:18:56
【问题描述】：

我正在使用 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();
        }
    }

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

【问题讨论】：

你有[autoClose]="'outside'" 为什么没有[autoClose]="'true'"？ (ng-bootstrap.github.io/#/components/datepicker/…)，顺便说一句，您是在使用 ngbdatepicker 到范围日期还是简单日期？
@Eliseo 一个范围日期，我也希望能够手动输入它并按 Enter。
@Mike3355 如果在您使用键盘手动键入日期时自动选择了日期。为什么要按回车键？

标签： angular ng-bootstrap

【解决方案1】：

只需使用 ViewChild 到 datePicker 并在函数 onDateSelection 中关闭

@ViewChild('datepicker',{static:false}) ngbDatepicker

onDateSelection(date: NgbDate) {
    if (!this.fromDate && !this.toDate) {
      this.fromDate = date;
    } else if (this.fromDate && !this.toDate && date.after(this.fromDate)) {
      this.toDate = date;
      this.ngbDatepicker.close(); //<---this one

    } else {
      this.toDate = null;
      this.fromDate = date;
    }
  }

见stackblitz

【讨论】：

感谢您的建议，但回车按钮仍然不起作用，事件未触发。 :(

【解决方案2】：

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

作为一种解决方法，您可以检索对这些输入的引用（在 ngAfterViewInit 中）并在很多情况下将侦听器绑定到关键事件，如下所示

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

    })

}

这是stackblitz example

【讨论】：