NgbDatePicker ：专注于输入框

Question

我无法专注于input 框（在click/focus），而是专注于日历弹出窗口。当我按 Tab 或单击 ngbDatePicker 输入框时，它会打开 calendar，焦点是今天的日期（或任何选择的日期）。结果，它不允许我用键盘输入日期。

但我想要的是聚焦输入框，即使日历是打开的，这样我就可以直接输入日期。

我尝试过通过 javascript 进行对焦，但它不起作用。

<input
    id="dateOfBirthInput"
    type="text"
    class="form-control"
    placeholder="Datepicker"
    name="date_of_birth"
    [(ngModel)]="user.date_of_birth"
    ngbDatepicker
    required
    [minDate] = "minDate"
    #dob="ngbDatepicker"
    (click)="dob.open();"
    (focus)="dob.open();"
/>

我尝试从角度组件打开日期选择器，但它不起作用。

<input
    id="dateOfBirthInput"
    type="text"
    class="form-control"
    placeholder="Datepicker"
    name="date_of_birth"
    [(ngModel)]="user.date_of_birth"
    ngbDatepicker
    required
    [minDate] = "minDate"
    #dob="ngbDatepicker"
    (click)="focusDateOfBirthInput();"
    (focus)="focusDateOfBirthInput();"
/>

//component code
@ViewChild("dob") dob: NgbDatepicker;

focusDateOfBirthInput() {
    console.log("focusDateOfBirthInput");
    document.getElementById("dateOfBirthInput").focus();
    console.log(this.dob);
    this.dob.open()
}

任何帮助将不胜感激。

Answer 1

这是一个可行的解决方案

• ng-bootstrap 9.0.2
• 角 11

其他版本未测试。

我们需要ngZone，以便在日期输入聚焦时datepicker 弹出窗口不会“重新聚焦”。

    // (...)
        
        @ViewChild('datePicker') datePicker: any;
        
       //  (...)
        
        constructor(private ngZone: NgZone) {}
        
        public toggleDatePicker(): void {
            this.datePicker.toggle();
            if (this.datePicker.isOpen()) {

         this.ngZone.onStable.asObservable().pipe(take(1)).subscribe(() => {
                const elementToFocus = this.datePicker._elRef.nativeElement;
                if (elementToFocus) {
                  elementToFocus.focus();
                }
              });
            }
          }

在模板中

     <input type="text"
               #datePicker="ngbDatepicker"
               ngbDatepicker
               (click)="toggleDatePicker()" 
               (...)
    />

Answer 2

你可以这样做：

public change(el,dael){
  dael.open();
  setTimeout(function(){
    console.log(el);
    el.focus()
  },500);

}

<input
    id="dateOfBirthInput"
    type="text"
    (click)="change($event.target,dob);"
    (focus)="change($event.target,dob);"
    class="form-control"
    placeholder="Datepicker"
    name="date_of_birth"
    [(ngModel)]="user.date_of_birth"
    ngbDatepicker
    required
    [minDate] = "minDate"
    #dob="ngbDatepicker"
    
/>

Answer 3

我找到了一种解决方法来实现你想要的，请试试这个：

1. 使用这样的构造函数注入渲染器并从 @角/核心

   构造函数（私有渲染器：渲染器）

2. 然后像这样更新你的输入元素：

说明：我获取了另一个名为“inputRef”的输入引用，并将在 component.ts 文件中将其作为 ViewChild。

1. 通过“ViewChild”获取输入元素的引用，并通过settimeout实现方法

   @ViewChild('inputRef') inputRef; 构造函数（私有渲染器：渲染器）{ }

   focusOnInput(datePickerRef) { datePickerRef.open(); 设置超时（（）=> { this.renderer.invokeElementMethod(this.inputRef.nativeElement, 'focus'); }, 10) }

还有宾果游戏，我试过并测试过，它会起作用的。