Make input look like Kendo Time Picker

7 posts, 1 answers
  1. Grant
    Grant avatar
    92 posts
    Member since:
    Jul 2016

    Posted 15 Nov Link to this post

    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

  2. Preslav
    Admin
    Preslav avatar
    261 posts

    Posted 15 Nov Link to this post

    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.
  3. Grant
    Grant avatar
    92 posts
    Member since:
    Jul 2016

    Posted 16 Nov in reply to Preslav Link to this post

    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

     

  4. Preslav
    Admin
    Preslav avatar
    261 posts

    Posted 17 Nov Link to this post

    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.
  5. Grant
    Grant avatar
    92 posts
    Member since:
    Jul 2016

    Posted 17 Nov in reply to Preslav Link to this post

    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.

  6. Answer
    Preslav
    Admin
    Preslav avatar
    261 posts

    Posted 17 Nov Link to this post

    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.
  7. Grant
    Grant avatar
    92 posts
    Member since:
    Jul 2016

    Posted 17 Nov in reply to Preslav Link to this post

    Yes Preslav!

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

    Perfect solution.

    Thanks again,
    Grant

Back to Top