Kendo UI date blank in Chrome 56.0.2924

5 posts, 1 answers
  1. Daniel
    Daniel avatar
    3 posts
    Member since:
    May 2014

    Posted 13 Jul Link to this post

    I'm using Kendo 2015.1.429 with asp.net mvc, bootstrap.

    In the cshtml file: @Html.EditorFor(model => model.shipmentDate)

    It shows blank(see attached) value in Chrome v56 and up, this is working fine in IE10, 11.

    Here's the ViewModel:
    [Display(Name = "Shipment Date")]
    [Required(ErrorMessage = "Please select a shipment date")]
    [DataType(DataType.Date)]
    [DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)]
    public DateTime shipmentDate { get; set; }

    Also, I inspect this element with Chrome's Developer tool and I have this:

    <input data-val="true" data-val-date="The field Date must be a date." data-val-required="Please select a date" id="date" name="date" type="date" value="07/13/17" />
    <script>
    jQuery(function(){jQuery("#date").kendoDatePicker({"format":"MM/dd/yy","min":new Date(1900,0,1,0,0,0,0),"max":new Date(2099,11,31,0,0,0,0)});});
    </script>

    The value is passed from the Controller as you can see, but date does not display. Is this a known issue?

    How do I fix this annoying issue?

  2. Stefan
    Admin
    Stefan avatar
    1137 posts

    Posted 17 Jul Link to this post

    Hello Daniel,

    Based on the provided information I can assume that this is caused by a known issue which is already fixed in the newest versions of Kendo UI.

    The issue is caused by the type="date" attribute.

    I can suggest manually setting the type attribute to text in order to fix the issue if updating is not an option.

    HtmlAttributes(new { type= "text" })

    If it still occurs, please send a runnable example and we will gladly assist.

    Regards,
    Stefan
    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.
  3. Daniel
    Daniel avatar
    3 posts
    Member since:
    May 2014

    Posted 17 Jul in reply to Stefan Link to this post

    Thanks Stefan.
    I tried with kendo 2017.2.621 and it's the same. It works with IE but not in Google Chrome.
    Example: https://1drv.ms/u/s!AhpNqvGJSEDjuHgBne7waMqR1boo

    Try either this:

    DatePicker/Sample
    DatePicker/Index

  4. Answer
    Stefan
    Admin
    Stefan avatar
    1137 posts

    Posted 19 Jul Link to this post

    Hello Daniel,

    Thank you for the provided example.

    After inspecting it I noticed that the example is still using the older DLL version of Kendo UI(Kendo.Mvc.dll).

    Please change the reference to the latest version of Kendo UI. Please have in mind that the DLL has to correspond to the used MVC version:

    http://docs.telerik.com/aspnet-mvc/getting-started/asp-net-mvc-5#add-kendomvcdll-reference

    Also, applying the mentioned workaround fix the issue as well:

    @(Html.Kendo().DatePicker().Name("DateOfBirth")
        .Value("2013-07-11")
        .HtmlAttributes(new { type = "text" })
    )


    Regards,
    Stefan
    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.
  5. Daniel
    Daniel avatar
    3 posts
    Member since:
    May 2014

    Posted 24 Aug in reply to Stefan Link to this post

    Hi Stefan,

    Thanks - changing the latest Kendo.Mvc.dll works, as well as the workaround.

Back to Top