Keyboard interaction in Angular Datepicker component

17 Nov 20222 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.

app.component.ts

import { Component,HostListener,ViewChild } from '@angular/core';

@Component({
    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.focusIn();
    }
  }
    constructor() {
    }
}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { DatePickerModule } from '@syncfusion/ej2-angular-calendars';
import { AppComponent } from './app.component';


/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        DatePickerModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);