This is a migrated thread and some comments may be shown as answers.

A generic keydown event to capture "t"

5 Answers 572 Views
Date/Time Pickers
This is a migrated thread and some comments may be shown as answers.
John
Top achievements
Rank 1
Iron
John asked on 17 Aug 2020, 10:19 PM

Hi,

 

We have a need to capture when a user presses "t" when focused on a DatePicker. When they type "t" I need to set the Date on the DatePicker to today's date.

This is essentially a quick shortcut key. Needed because we have Forms with lots of DatePickers and the users will use keyboard only as they tab their way through the form.

I do have a solution, which I worked like this:

$("#ExpiryDate").kendoDatePicker({
            format: "d",
            dateInput: true
        });
 
        $("#ExpiryDate").on("keydown", function(e) {
            var keyCode = e.keyCode || e.which;
            if (keyCode == 84) {
                e.preventDefault();
                var picker = $(this).data("kendoDatePicker");
                picker.value(new Date());
            } else {
                return;
            }
        });

 

However this approach means adding this code snippet for every DatePicker after the initial configuration of the component. And we have content this is loaded on demand, so I can't create all DatePickers on the initial load of the page.

What I'm hoping for is a more generic solution. From what I've read, keydown isn't an event on DatePicker that I can extend.

I was hoping for something like this to work:

var extendDatePicker = kendo.ui.DatePicker.extend({
        keydown: function() {
            console.log("keydown");
        }
    });

 

But that was wishful thinking.

If anyone has a solution, I'd appreciate it :)

Thanks

 

5 Answers, 1 is accepted

Sort by
0
Viktor Tachev
Telerik team
answered on 19 Aug 2020, 10:33 AM

Hello John,

 

The keydown event is actually not raised by the DatePicker widget. The event is attached to the HTML input element from which the DatePicker is initialized. 

That said, if you would like to have a more generic handler I suggest using the data-role attribute in the selector. This way the handler can be added to all DatePicker widgets on a page. I have prepared a small sample where the approach is illustrated.

https://dojo.telerik.com/EDaXuZUh

Give it a try and let me know how it works for you.

 

Regards,
Viktor Tachev
Progress Telerik

0
John
Top achievements
Rank 1
Iron
answered on 19 Aug 2020, 11:26 PM
Hi Viktor     
0
John
Top achievements
Rank 1
Iron
answered on 19 Aug 2020, 11:32 PM

Hi Viktor,

(Accidentally clicked Reply before I was ready)

Thanks for the help. That gets me some of the way and I can work with that as a solution. But, if I alter your example and have the DatePicker lines after the .on "keydown", it stops working.

I understand why that's happening. But I was looking for a solution where I could extend the DatePicker generically, so that each new DatePicker I create (which may happen when content is loaded dynamically into my page via Ajax) would adhere to this keydown.

 

Cheers,

John

 

This doesn't work:

$("input[data-role='datepicker']").on("keydown", function(e) {
            var keyCode = e.keyCode || e.which;
            if (keyCode == 84) {
              e.preventDefault();
              var picker = $(this).data("kendoDatePicker");
              picker.value(new Date());
            } else {
              return;
            }
          });

 

$("#datepicker").kendoDatePicker();
$("#datepicker2").kendoDatePicker();
0
Accepted
Tsvetomir
Telerik team
answered on 21 Aug 2020, 01:33 PM

Hi John,

My name is Tsvetomir and I am temporarily covering for my colleague Viktor.

As already stated, the keydown event is actually an event exposed by jQuery. Since the DatePicker does not expose an event that indicates that its initialization is finished, we should intercept the internal logic and bind the event to the input.

Here is an example:

https://dojo.telerik.com/oGEdEGeM

All that is needed is that you include the overridden function before the first DatePicker widget is initialized. Any consequent initialization will have the respective event attached.

 

Kind regards,
Tsvetomir
Progress Telerik

Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive , special prizes and more, for FREE?! Register now for DevReach 2.0(20).

0
John
Top achievements
Rank 1
Iron
answered on 24 Aug 2020, 10:50 PM

Hi Tsvetomir,

Thanks for the solution. I've implemented it in our code base and so far it's working perfectly.

I'm going to mark this is answered. If anything else comes up or I have any problems, I'll update the thread.

Thanks again,

John

Tags
Date/Time Pickers
Asked by
John
Top achievements
Rank 1
Iron
Answers by
Viktor Tachev
Telerik team
John
Top achievements
Rank 1
Iron
Tsvetomir
Telerik team
Share this question
or