Angular
Demos
Support
Forum
Download
Search results

Keyboard Interaction

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.

Source
Preview
app.component.ts
app.module.ts
main.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() {
    }
}
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 { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

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