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

Make input look like Kendo Time Picker

6 Answers 87 Views
Date/Time Pickers
This is a migrated thread and some comments may be shown as answers.
Grant
Top achievements
Rank 2
Veteran
Iron
Grant asked on 15 Nov 2017, 12:41 PM

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

6 Answers, 1 is accepted

Sort by
0
Preslav
Telerik team
answered on 15 Nov 2017, 03:30 PM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Grant
Top achievements
Rank 2
Veteran
Iron
answered on 16 Nov 2017, 07:07 AM

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

 

0
Preslav
Telerik team
answered on 17 Nov 2017, 11:19 AM
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.
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Grant
Top achievements
Rank 2
Veteran
Iron
answered on 17 Nov 2017, 11:34 AM

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.

0
Accepted
Preslav
Telerik team
answered on 17 Nov 2017, 11:44 AM
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.
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Grant
Top achievements
Rank 2
Veteran
Iron
answered on 17 Nov 2017, 11:47 AM

Yes Preslav!

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

Perfect solution.

Thanks again,
Grant

Tags
Date/Time Pickers
Asked by
Grant
Top achievements
Rank 2
Veteran
Iron
Answers by
Preslav
Telerik team
Grant
Top achievements
Rank 2
Veteran
Iron
Share this question
or