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

KendoUI TimePickerFor

5 Answers 491 Views
Date/Time Pickers
This is a migrated thread and some comments may be shown as answers.
Shawn
Top achievements
Rank 1
Shawn asked on 17 May 2017, 03:16 PM

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?

 

 

 

 

 

5 Answers, 1 is accepted

Sort by
0
Georgi
Telerik team
answered on 19 May 2017, 11:00 AM
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.
0
Danielle
Top achievements
Rank 1
answered on 24 Jul 2017, 01:55 AM
I am getting the exact same issue. Was a fix for this found?
0
Georgi
Telerik team
answered on 25 Jul 2017, 01:52 PM
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.
0
Danielle
Top achievements
Rank 1
answered on 31 Jul 2017, 11:28 PM

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.

0
Georgi
Telerik team
answered on 03 Aug 2017, 05:23 AM
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.
Tags
Date/Time Pickers
Asked by
Shawn
Top achievements
Rank 1
Answers by
Georgi
Telerik team
Danielle
Top achievements
Rank 1
Share this question
or