KendoUI TimePickerFor

[Shawn]

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 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?

 

 

 

 

 

[Georgi]

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

[Danielle]

I am getting the exact same issue. Was a fix for this found?

[Georgi]

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

[Danielle]

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.

[Georgi]

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