TimePicker .value() not returning the expected date

4 posts, 0 answers
  1. The Cowboy
    The Cowboy avatar
    19 posts
    Member since:
    Mar 2010

    Posted 25 Jun 2015 Link to this post

    I'm using the Kendo UI TimePicker control where the min and max times can be set to the next or previous day. 

     When selecting a time that exists the next (or previous) day the value returned is a full DateTime but is always set to the current date.

     For example, if the current date time is "Jun 25, 2015 10:00 PM" and you scroll down and select "Jun 26, 2015 02:00 AM" the return value will be "Thu Jun 25 2015 02:00:00 GMT-0400 (Eastern Daylight Time)" but I'm expecting it to be June 26.

    How do I make this control return the expected DateTime.

     Here are my code segments:

    // Init the control

    $("#dtpEndDateTime").kendoTimePicker({
                format: "MMM dd, yyyy  hh:mm tt",
                interval: 15,
                change: onShiftEndDateTimeChange
            });

     

     // Set the values elsewhere

    var dtpEndDateTime = $("#dtpEndDateTime").data("kendoTimePicker");
       dtpEndDateTime.value(moment(_shift.EndDateTime).toDate());
       dtpEndDateTime.min((moment(_shift.StartDateTime).add(15, "minutes")).toDate());
       dtpEndDateTime.max((moment(_shift.EndDateTime).add(12, "hours")).toDate());

     

     // get the selected value inside the onShiftEndDateTimeChange event

    var datetimepicker = $("#dtpEndDateTime").data("kendoTimePicker");
       console.log(datetimepicker.value());

  2. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 29 Jun 2015 Link to this post

    Hi Jeff,

    The reason for current behavior is that the timePicker gets only the time part of the selected date and apply it to the current value. For example if the initial value is set to date "1/1/2000 00:00" and you select time "5/5/2015 13:00", only the time portion will be set which results in "1/1/2000 13:00". In current case I would suggest to use the dateTimePicker widget instead which supports updating the date portion as well:
    Regards,
    Vladimir Iliev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. The Cowboy
    The Cowboy avatar
    19 posts
    Member since:
    Mar 2010

    Posted 29 Jun 2015 in reply to Vladimir Iliev Link to this post

    Hi Vladimir, 

    Even though the timePicker only gets the time portion of the date selected, the list of options can display the full date through formatting. Is there any workaround to get the value selected from the options list instead of just getting the time portion? I'd prefer not to give the user an option to open a date picker when it's not necessary. 

     Thanks

  5. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 30 Jun 2015 Link to this post

    Hello Jeff,

    Another option in current case is to use the new "dates" option of the timePicker - the dates defined in this collection are applied as-is (not only the time part). Please check the example below:

    Regards,
    Vladimir Iliev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready