Make input look like Kendo Time Picker

[Grant]

Hi, 

Im using the Kendo Date Picker and next to it is an input Im using to display a time range (eg: 12:00 - 13:00). Is it possible to make the input look and behave (ie, changing shades on hover) like a kendoUI Time Picker, but not function like one?

Thanks, 
Grant

[Preslav]

Hello Grant,

Based on your post, I am not sure what is the exact use case. Thus, could you please elaborate?

I assume that your project requires displaying a regular input that looks like other Kendo UI inputs. This could be achieved by assigning the "k-textbox" class to the input. For example:

<input id="textInput" class="k-textbox" type="text" value="12:00 - 13:00" />

For a runnable example, check my testing Dojo: http://dojo.telerik.com/ivUNI 

If the above is not the case, please share any additional information that would help me understand the requirements. For example screencasts.


Regards,
Preslav
Progress Telerik

[Grant]

Morning Preslav, 

Thanks for the speedy response, Im aware of the k-textbox class, but its not the solution im looking for, I'll try explain it better.

So I have a date picker and an input setup like your example. The input has to display a time range, but the Kendo time picker doesn't support displaying multiple times, so I cant use that widget. However most of the elements on my page are Keno widgets and it would be nice to have the time range input to look like a time picker to keep within the look-and-feel of the page.

I've updated your Dojo example with a couple comments to hopefully clarify things (http://dojo.telerik.com/ivUNI/2).

Thanks,
Grant

 

[Preslav]

Hello Grant,

Thank you for elaborating on the scenario.

Based on your last post, I believe that your project only requires an input that looks like the TimePicker, the only difference should be that the pop-up with the hours should not appear on click. Please correct me if I am wrong.

The easiest way to achieve that is to create a TimePicker widget and handling its open event. In the event handler prevent the default.

• https://docs.telerik.com/kendo-ui/api/javascript/ui/timepicker#events-open

For example:

$("#timerange").kendoTimePicker({
  open: function(e) {
    e.preventDefault();
  }
});

Additionally, find the modified Dojo here: http://dojo.telerik.com/ivUNI/3

I hope this helps.


Regards,
Preslav
Progress Telerik

[Grant]

Hi again, 

So I have previously reviewed the Timepicker API. The reason Im looking to style an input like the timepicker is that I also need to pragmatically set the value, and the TimePicker.value() only accepts a string if its in a date format.

I've updated the Dojo to simulate this, http://dojo.telerik.com/ivUNI/4

Thanks,
Grant

P.S.Like I said in my previous post, this is a nice-to-have feature so if its not possible or is a huge hack, dont worry about it.

[Preslav]

Hi Grant,

Indeed, you cannot set a string via the API, however, inside the widget wrapper, there is a regular HTML input. That said, we can use the jQuery val method to programmatically set the desired string.

• https://api.jquery.com/val/

For example:

$("button").click(function() {
  console.log("setting Time...")
  $("#timerange").val("12:00 - 13:00");
});

And the modified Dojo is available here: http://dojo.telerik.com/ivUNI/5

If any further modifications are required, do not hesitate to write back.


Regards,
Preslav
Progress Telerik

[Grant]

Yes Preslav!

Thank you, I cant believe I forgot about the original element.

Perfect solution.

Thanks again,
Grant