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

Date field not rendering correct in browsers that support HTML 5

1 Answer 1011 Views
Date/Time Pickers
This is a migrated thread and some comments may be shown as answers.
PaulMrozowski
Top achievements
Rank 1
PaulMrozowski asked on 16 Jul 2012, 12:48 AM
I've noticed that the Kendo Date control is rendering weird under browsers that support HTML 5. I don't see my selected date and I end up with a down arrow to the left of the calendar graphic. It appears to happen because the input box that is rendered is rendering as a "date" type and not a "text" type, so the browser itself is adding its own support.

Here's an example of the HTML that is rendered:

<input class="k-input" id="CashReceipt_ReceivedOn" name="CashReceipt.ReceivedOn" type="date" value="7/15/2012" data-role="datepicker" style="width: 100%; ">

When I compared that to the one in the example project (which appears to work), I get this (note the type="text" in this version):

<input class="k-input" id="datepicker" name="datepicker" style="width: 100%; " type="text" value="10/10/2011" data-role="datepicker">

I'm not really sure what's triggering the difference or how to change this. Any ideas?

1 Answer, 1 is accepted

Sort by
0
Accepted
Georgi Krustev
Telerik team
answered on 16 Jul 2012, 03:39 PM
Hello Paul,

 
Currently, the DatePicker wrapper renders INPUT element type "date". When the Kendo DatePicker initializes on the client it changes the type of the input to "text". Thus we avoid the native rendering of the "date" input. ​If the JavaScript is disabled, then the Kendo DatePicker will not be initialized and the input can be used as native one.

Unfortunately, some browsers with native support for "date" type (Chrome in particular) validate the set value and if it is not in the correct format (a valid full-date as defined in [RFC 3339]) then it is ignored. For now you can change the type the input to "text" permanently and avoid any issues related with the native inputs:

@(Html.Kendo().DatePicker()
     .Name("datepicker")
     .Value("10/10/2011")
     .HtmlAttributes(new { type = "text" })
)
All the best,
Georgi Krustev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Date/Time Pickers
Asked by
PaulMrozowski
Top achievements
Rank 1
Answers by
Georgi Krustev
Telerik team
Share this question
or