NgbDatePicker : 专注于输入框

Question

I am not able to focus on the input box (on click / focus ), instead it focuses on the calender popup. When i press tab or click on the ngbDatePicker input box, it opens the calendar , and focus is on the today's date (or whichever selected). As a result, It doesn't let me type the date by keyboard.

But what i want is to focus the input box, even if the calendar is open, so that i can type the date directly.

I have tried focusing through javascript, but it is not working.

<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();"
/>

I tried opening the datepicker from angular component, but it is not working.

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

Any help will be greatly appreciated.

Answer 1

I have found a workaround to achieve what you want please try this:

1. Inject renderer using constructor like this and import it as well from @angular/core

   constructor(private renderer: Renderer)

2. And then update your input element like this:

Explaination: I have taken another input reference named "inputRef" and will take it in component.ts file as ViewChild.

3. Take the reference of input element via "ViewChild" and implement the method with settimeout

   @ViewChild('inputRef') inputRef; constructor(private renderer: Renderer) { }

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

And bingo, I tried and Tested, It will work.

Answer 2

You can do like this :

 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

here is a working solution for

• ng-bootstrap 9.0.2
• Angular 11

Other versions not tested.

We need ngZone so that the datepicker popup is not "re-focused" if the date-input is focused.

    // (...)
        
        @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();
                }
              });
            }
          }
       // in template
     <input type="text"
               [attr.id]="id"
               [attr.aria-describedby]="validationId"
               #datePicker="ngbDatepicker"
               ngbDatepicker
               (click)="toggleDatePicker()" 
               (...)
    />