KendoUI TimePickerFor

6 posts, 0 answers
  1. Shawn
    Shawn avatar
    1 posts
    Member since:
    Oct 2016

    Posted 17 May Link to this post

    I'm having a strange problem (it didn't happen before and all of a sudden started happening) with the Kendo().TimePickerFor().

     

    I have an ASP MVC application and I'm passing a model with start and end times to the Kendo().TimePickerFor() like this:

    <div>
                       @Html.LabelFor(model => model.StartTime)
                       @(Html.Kendo().TimePickerFor(model => model.StartTime).Events(e => e.Change("startChange"));
    </div>
    <div>

           @Html.LabelFor(model => model.EndTime)
           @Html.Kendo().TimePickerFor(model => model.EndTime);
    </div>

     

    Using the chrome debugger; I get this error:

     

    The specified value "8:00 AM" does not conform to the required format.  The format is "HH:mm", "HH:mm:ss" or "HH:mm:ss.SSS" where HH is 00-23, mm is 00-59, ss is 00-59, and SSS is 000-999.

     

     

    So I thought, OK, just a formatting issue. So I did this:

     

       <div>
                       @Html.LabelFor(model => model.StartTime)
                       @(Html.Kendo().TimePickerFor(model => model.StartTime)
            .Events(e => e.Change("startChange")).Format("hh:mm"));
                                    </div>

     

    But this changes it to military time; and I no longer have the AM/PM option.

     

    So I did this:

       <div>
                       @Html.LabelFor(model => model.StartTime)
                       @(Html.Kendo().TimePickerFor(model => model.StartTime)
            .Events(e => e.Change("startChange")).Format("hh:mm"));
                                    </div>

     

    and I get the original error as above on the chrome debugger: 

    The specified value "8:00 AM" does not conform to the required format.  The format is "HH:mm", "HH:mm:ss" or "HH:mm:ss.SSS" where HH is 00-23, mm is 00-59, ss is 00-59, and SSS is 000-999.

     

     

    How do I pass the date and keep the am/pm format?

     

     

     

     

     

  2. Georgi
    Admin
    Georgi avatar
    146 posts

    Posted 19 May Link to this post

    Hi Shawn,

    I replicated your situation and it works as expected on my end. Please send me the project or a sample where the error appears so I can investigate locally your exact scenario and help you more efficiently.

    Regards,
    Georgi
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Danielle
    Danielle avatar
    2 posts
    Member since:
    Jun 2015

    Posted 23 Jul Link to this post

    I am getting the exact same issue. Was a fix for this found?
  4. Georgi
    Admin
    Georgi avatar
    146 posts

    Posted 25 Jul Link to this post

    Hello Danielle,

    Is is possible to use the following format:

    @Html.Kendo().TimePickerFor(x => x.StartTime).Format("hh:mm tt")

    This way the AM/PM option wont be lost.


    Regards,
    Georgi
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. Danielle
    Danielle avatar
    2 posts
    Member since:
    Jun 2015

    Posted 31 Jul in reply to Georgi Link to this post

    Hi Georgi,

    Thanks for the reply. I am using the format you advised, however, in Chrome I am still getting the following error:

    The specified value "10:17 AM" does not conform to the required format.  The format is "HH:mm", "HH:mm:ss" or "HH:mm:ss.SSS" where HH is 00-23, mm is 00-59, ss is 00-59, and SSS is 000-999.

    This issue only happens in Chrome browser and I have found a workaround by populating a hidden field with the required value and then populating the time picker control with the value from the hidden field.

  6. Georgi
    Admin
    Georgi avatar
    146 posts

    Posted 03 Aug Link to this post

    Hello Danielle,

    I tried to recreate the described behaviour, however, the Kendo TimePicker works as expected on my end.

    The easiest way to workaround this behaviour is to force the numeric text box to render as a "type=text" instead of "type=date" element. This way no matter what the date format is, the browser will not complain about it being invalid. To force the input to render as "type=text" element, just set its wrapper HtmlAttributes method:

    @Html.Kendo().TimePickerFor(x => x.StartTime)
     .HtmlAttributes(new { @type = "text" })

    In case the aforementioned approach does not help you, please send me runnable sample where the issue is observed, so I can investigate locally your exact case and help you more efficiently.

    Regards,
    Georgi
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top