Having trouble getting help?
Contact Support
Contact Support
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));