NgbDatePicker: фокус на поле ввода - PullRequest
Новая
       3

NgbDatePicker: фокус на поле ввода

0 голосов
/ 29 марта 2019

Я не могу сосредоточиться на поле input (на click / focus), вместо этого оно фокусируется на всплывающем календаре.Когда я нажимаю клавишу табуляции или щелкаю на поле ввода 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()
}

Любая помощь будет принята с благодарностью.

Ответы [ 2 ]

1 голос
/ 30 марта 2019

Вы можете сделать так: 

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"
    
/>
1 голос
/ 29 марта 2019

Я нашел обходной путь для достижения того, чего вы хотите, попробуйте следующее:

  1. Внедрите рендерер, используя такой конструктор, и импортируйте его также из @ angular / core

    constructor (частное средство визуализации: Renderer)

  2. А затем обновите свой элемент ввода следующим образом:

Объяснение: Iвзял другую входную ссылку с именем "inputRef" и примет ее в файле component.ts как ViewChild.

Взять ссылку на элемент ввода через "ViewChild" и реализовать метод с помощью settimeout

@ ViewChild ('inputRef') inputRef;конструктор (частное средство визуализации: Renderer) {}

focusOnInput (datePickerRef) {datePickerRef.open ();setTimeout (() => {this.renderer.invokeElementMethod (this.inputRef.nativeElement, 'focus');}, 10)}

И бинго, я пробовал и проверял, этобудет работать.

...