Date field not rendering correct in browsers that support HTML 5

2 posts, 1 answers
  1. PaulMrozowski
    PaulMrozowski avatar
    80 posts
    Member since:
    Apr 2007

    Posted 15 Jul 2012 Link to this post

    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?
  2. Answer
    Georgi Krustev
    Admin
    Georgi Krustev avatar
    3707 posts

    Posted 16 Jul 2012 Link to this post

    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!
  3. UI for ASP.NET MVC is VS 2017 Ready
Back to Top