Date field not rendering correct in browsers that support HTML 5

[PaulMrozowski]

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?

[Georgi Krustev]

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