Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: How to close the mdb angular datepicker close , when ESC key is pressed?

sakthicgs free asked 4 years ago


How to close the mdb angular datepicker close , when ESC key is pressed? Any document option is there or any other solutions.


Konrad Stępień staff answered 4 years ago


Hi @sakthicgs,

You should use @ViewChild in your project. Like this:

import { Component, ViewChild, HostListener } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  @ViewChild('datepicker', { static: false }) datePicker: any;

  @HostListener('keydown.esc')
  handleInput() {
    if (this.datePicker.isOpen) {
      this.datePicker.closeBtnClicked();
    }
  }

}

And then add #datepicker attribute for your picker.

Like this:

<mdb-date-picker
  #datepicker
 ...
></mdb-date-picker>

Best, Konrad.


sakthicgs free commented 4 years ago

Yes ,Its Working Fine @Konrad Stępień . Thanks



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 8.3.0
  • Device: desktop
  • Browser: chorme
  • OS: windows
  • Provided sample code: No
  • Provided link: No