Filter TimePicker while typing

[Pavlina]

I have a timepicker which holds time values in the format of HH:mm. What I want to achieve is to filter the values while typing, so if I type 11 in the field, I have only the following options - 11:00 and 11:30.

Is there a way to achieve this?

[Nikolay]

Hi Pavlina,

By design, the user has 2 options to add a value to the TimePicker:

 - By choosing from the popup list:

Or

- By typing a value directly in the input: 

However, when the user is typing a value the popup with the list of values is not visible. It is only shown when the user clicks on the icon next to the input and clicking into the input hides it.

That said, what exactly is the requirement? Feel free to share a screenshot or a video demonstrating the case.

Regards,

Nikolay

[Pavlina]

Hi Nikolay,

 

Thank you so much for your detailed explanation.

The attached screenshot(another timepicker plugin) demonstrates what I'm trying to achieve with kendo time picker, but from your explanation I'm gathering the sense that this wouldn't be possible to achieve with kendo time picker. Yet if you have any suggestions I would be really happy to hear them out.

 

Best,

Pavlina

 

[Nikolay]

Hi Pavlina,

This is not a built-in feature that you can enable. However, I can think of a custom implementation that in the keyup event handler will set dates array dynamically and will open the popup. For example:

      $("input[data-role='timepicker']").on("keyup", function(e) {
        var time = $("#timepicker").val();
        var keyCode = e.keyCode || e.which;
        if (keyCode == 8) {
          timepicker.close();
          return;

        } else
          timepicker.setOptions({
            dates: [
              new Date(2000, 10, 10, time, 0, 0),
              new Date(2000, 10, 10, time, 30, 0)
            ]
          })
        timepicker.open();
      });

Here is a Dojo demo demonstrating this: https://dojo.telerik.com/ojeqOnuz

Let me know if this is what you are looking for.

Regards,

Nikolay

 

[Pavlina]

Hi Nikolay,

 

This is what I've been trying to achieve, thank you so much!

 

I just noticed a small bug doing this, upon deletion of the selected value the options set is still limited (screenshot attached). What would be the best solution to do here?

 

Edit. Upon more work, I noticed that if the time is in 24 hours format, working with two set options is not correct. However setting min and max options doesn't result in correct options either. Is there a better way to set/filter options, so when 1 is typed options are starting from 10:00 etc to 19:00?

 

Best,

Pavlina

[Nikolay]

Hi Pavlina,

To add the respective pm dates you need to add those to the dates array:

      $("input[data-role='timepicker']").on("keyup", function(e) {
        var time = $("#timepicker").val();
        var pmtime = parseInt(time) +12;
        var keyCode = e.keyCode || e.which;
        if (keyCode == 8) {
          timepicker.close();
          return

        } else
          timepicker.setOptions({
            dates: [
              new Date(2000, 10, 10, time, 0, 0),
              new Date(2000, 10, 10, time, 30, 0),
              new Date(2000, 10, 10, pmtime, 0, 0),
              new Date(2000, 10, 10, pmtime, 30, 0)
            ]
          });
        timepicker.open();
      });

Dojo: https://dojo.telerik.com/ojeqOnuz/4

Regarding the second inquiry, this will require adding different dates to the dates array depending on the input value. Please check out the following Dojo that adds the logic when the user inputs the number "1".  You can expand this logic for each number or simplify it.

• https://dojo.telerik.com/ojeqOnuz/3

Let me know if you have any questions.

Regards,

Nikolay