Keyboard interaction in Angular Datepicker component

27 Apr 20242 minutes to read

You can use the following keys to interact with the DatePicker.
The component implements the keyboard navigation support by following the WAI-ARIA practices.

It supports the below list of shortcut keys.

Input Element

Press To do this
Alt + Down Arrow Opens the popup.
Alt + Up Arrow Closes the popup.
Esc closes the popup.

To know more about Calendar navigation keys refer the Calendar keyboard Interaction section.

To focus the Calendar component use the alt+t keys.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { DatePickerModule } from '@syncfusion/ej2-angular-calendars'



import { Component,HostListener,ViewChild } from '@angular/core';
import { CalendarComponent } from '@syncfusion/ej2-angular-calendars';

@Component({
imports: [
        
        DatePickerModule
    ],


standalone: true,
    selector: 'app-root',
    template: `
        <ejs-datepicker #ejDatePicker [value]='dateValue' placeholder='Enter date'></ejs-datepicker>
        `
})

export class AppComponent {
   @ViewChild('ejDatePicker') ejDatePicker?: CalendarComponent;
    public dateValue: Date = new Date();
    @HostListener('document:keyup', ['$event'])
  handleKeyboardEvent(event: KeyboardEvent) {
    if (event.altKey && event.keyCode === 84 /* t */) {
        // press alt+t to focus the control.
      (this.ejDatePicker as any).focusIn();
    }
  }
    constructor() {
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));