Angular NgbDatePicker：关注输入框

我无法聚焦于

输入

框（在

上单击

/

聚焦

），而是聚焦于日历弹出窗口。当我按tab键或单击

ngbDatePicker

输入框时，它会打开

日历

，焦点是今天的日期（或选择的日期）。因此，它不允许我用键盘输入日期

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

我尝试过通过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()
}

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

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

//组件代码
@ViewChild（“dob”）dob:NgbDatepicker；
focusDateOfBirthInput（）{
console.log（“focusDateOfBirthInput”）；
document.getElementById（“DateOfBirthinInput”）.focus（）；
console.log（this.dob）；
this.dob.open（）
}

---

任何帮助都将不胜感激。

我找到了一个解决方案，可以实现您的愿望。请尝试以下方法：

像这样使用构造函数注入渲染器，并从 @角/芯

构造函数（专用渲染器：渲染器）

然后更新输入元素，如下所示：

解释：我已经获取了另一个名为“inputRef”的输入引用，并将其作为ViewChild保存在component.ts文件中

通过“ViewChild”引用输入元素，并使用settimeout实现该方法

@ViewChild（'inputRef'）inputRef； 构造函数（专用渲染器：渲染器）{ }

焦点输入（datePickerRef）{ datePickerRef.open（）； 设置超时（（）=>{ this.renderer.invokeElementMethod（this.inputRef.nativeElement，'focus'）； }, 10) }

---

宾果，我已经试过并测试过了，它会起作用。

我找到了一个解决方法，可以实现您想要的。请尝试以下方法：

像这样使用构造函数注入渲染器，并从 @角/芯

构造函数（专用渲染器：渲染器）

然后更新输入元素，如下所示：

解释：我已经获取了另一个名为“inputRef”的输入引用，并将其作为ViewChild保存在component.ts文件中

通过“ViewChild”引用输入元素，并使用settimeout实现该方法

@ViewChild（'inputRef'）inputRef； 构造函数（专用渲染器：渲染器）{ }

焦点输入（datePickerRef）{ datePickerRef.open（）； 设置超时（（）=>{ this.renderer.invokeElementMethod（this.inputRef.nativeElement，'focus'）； }, 10) }

---

宾果，我试过了，测试过了，它会成功的。

你可以这样做：

公共变更（el、dael）{
dael.open（）；
setTimeout（函数（）{
控制台日志（el）；
el.focus（）
},500);
}

---

您可以这样做：

公共变更（el、dael）{
dael.open（）；
setTimeout（函数（）{
控制台日志（el）；
el.focus（）
},500);
}

---

我已经看到了这个例子，但它对我的情况没有帮助。你读了我的问题并理解了吗？是的，我理解了你的问题，让我总结一下，这样我们就在同一个页面上：当点击输入框上的/Tab时，它不会集中在输入元素上，它会打开日期选择模式，默认选择今天的日期，因此，你无法键入日期。是的，没错，我如何允许我的用户在日历打开的情况下在输入框中键入我更新了答案，请尝试解决方案，我尝试了，它对我有效。我使用了替代解决方案，但我将尝试您的解决方案，并确认我已经看到了示例，但它对我的情况没有帮助。你读了我的问题并理解了吗？是的，我理解了你的问题，让我总结一下，这样我们就在同一个页面上：当点击输入框上的/Tab时，它不会集中在输入元素上，它会打开日期选择模式，默认选择今天的日期，因此，你无法键入日期。是的，没错，我如何允许我的用户在日历打开的情况下在输入框中键入我更新了答案，请尝试解决方案，我尝试过，它对我有效。我使用了替代解决方案，但我将尝试和确认您的解决方案我使用了替代解决方案，但我将尝试和确认您的解决方案我使用了替代解决方案，但我会尝试并确认您的解决方案