A generic keydown event to capture "t"

[John]

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

 

[Viktor Tachev]

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

[John]

Hi Viktor     

[John]

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();

[Tsvetomir]

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

[John]

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