DatePicker and CurrencyTextBox stopped working in Chrome 56

[vladan strigo]

Hi,

few days ago DatePicker and CurrencyTextBox stopped working in Chrome when version 56. has been realesed.

Date picker and currency text box are not binded any more, there is no value displayed.

I checked out the console messages and I found there following 2 messages 

The specified value "2.1.2017." does not conform to the required format, "yyyy-MM-dd".

The specified value "10000,00" is not a valid number. The value must match to the following regular expression: -?(\d+|\d+\.\d+|\.\d+)([eE][-+]?\d+)?

Everything works fine in other browsers Chrome ver. 55, Firefox or IE, without these console message.

Version of Kendo is 2013.3.1324.

Can you explain why this happened in new versions of Chrome and how can we easily fix this serious issue?

Thanks,

Aljosa

[Stefan]

Hello Aljosa,

This is not a known issue and it was not reproduced in our testing scenario.

I made an example using the latest version of Kendo UI and it is working as expected:

http://dojo.telerik.com/UyIsA

Please advise if I missed something?

If the issue does not occur with the latest version on your end, please update the Kendo UI version to take advantage of all bug fixes and features.

Regards,
Stefan
Telerik by Progress

[Ashley Moss]

I encountered this same issue today and have managed to resolve the issue. For me it was occurring due to the input box having type="date". If you are using kendo directly in javascript, simply omitting this or using type="text" should fix the issue. If, like me, you are running from the MVC wrapper it's slightly different. The best means of fixing it is to use a newer version of Kendo, as it seems that the issue has already been addressed in the newer versions. If this isn't an option, which in this particular case it wasn't for me, then you need to do a small hack to modify the output that the MVC wrapper generates. There may be a more elegant way to do this, but my quick solution was to change:

@(Html.Kendo().DatePicker().Name("Somedate").Value("13/05/2017"))

to:

@Html.Raw(Html.Kendo().DatePicker().Name("Somedate").Value("13/05/2017").ToString().Replace("type=\"date\"","type=\"text\""))

This essentially gets the output generated by the wrapper and replaces the offending type string with what is present in the newer versions of Kendo.

Hope this helps in your case.

 

[Stefan]

Hello Aljosa,

Thank you for sharing this approach.

If updating is not an option we can also recommend setting the HTML attributes like this:

@(Html.Kendo().DatePickerFor(m => m)
 .HtmlAttributes(new { type = "text" }))

Regards,
Stefan
Telerik by Progress

[Allan]

I am using the latest version 2017.1.118 and use the tag helper and get the error.

The line:

<kendo-datepicker name="dtpEffectiveDate" Max="@DateTime.Today" for="EffectiveDate" /><br>

is converted to:

<input data-val="true" data-val-required="The Effective Date field is required." id="EffectiveDate" name="EffectiveDate" type="date" value="10/04/2017 12:00:00 AM" /><script>jQuery(function(){jQuery("#EffectiveDate").kendoDatePicker({"max":new Date(2017,3,10,0,0,0,0),"value":new Date(2017,3,10,0,0,0,0)});});</script>

And displays the warning:

The specified value "10/04/2017 12:00:00 AM" does not conform to the required format, "yyyy-MM-dd".
Using Chrome: Version 57.0.2987.133

I have included the following css and js in my bundleconfig

{<br>    "outputFileName": "wwwroot/bundle/kendo.min.css",<br>    "inputFiles": [<br>      "wwwroot/lib/kendo-ui/styles/kendo.common.min.css",<br>      "wwwroot/lib/kendo-ui/styles/kendo.common.core.min.css",<br>      "wwwroot/lib/kendo-ui/styles/kendo.default.min.css",<br>      "wwwroot/lib/kendo-ui/styles/kendo.default.mobile.min.css",<br>      "wwwroot/lib/kendo-ui/styles/kendo.dataviz.default.min.css"<br>    ],<br>    "minify": {<br>      "enabled": false<br>    }<br>  },<br><br>  {<br>    "outputFileName": "wwwroot/bundle/kendo-bootstrap.min.css",<br>    "inputFiles": [<br>      "wwwroot/lib/kendo-ui/styles/kendo.common-bootstrap.core.min.css",<br>      "wwwroot/lib/kendo-ui/styles/kendo.common-bootstrap.min.css",<br>      "wwwroot/lib/kendo-ui/styles/kendo.bootstrap.min.css"<br>    ],<br>    "minify": {<br>      "enabled": false<br>    }<br>  },<br>  {<br>    "outputFileName": "wwwroot/bundle/kendo.all.min.js",<br>    "inputFiles": [<br>      "wwwroot/lib/kendo-ui/js/kendo.all.min.js"<br>    ],<br>    "minify": {<br>      "enabled": false<br>    }<br>  },<br>  {<br>    "outputFileName": "wwwroot/bundle/kendo.aspnetmvc.min.js",<br>    "inputFiles": [<br>      "wwwroot/lib/kendo-ui/js/kendo.aspnetmvc.min.js"<br>    ],<br>    "minify": {<br>      "enabled": false<br>    }<br>  },

[Tsvetina]

Hello Allan,

Please confirm that you updated not only the Kendo UI references but the Telerik.UI.for.AspNet.Core project reference as well, in your project. The output of your DatePicker includes type="date" attribute, which is not rendered in the 2017 R1 version of UI for ASP.NET Core. You can also see in the demos, using the SP1 version (2017.1.223) that the DatePickers are rendered with type="text" attribute applied.

Regards,
Tsvetina
Telerik by Progress

[Allan]

I mentioned in my post I was using 118 not 223, however I have now upgraded the project to 223, and can confirm that yes, type is being set to text.  But the warning still persists.

<input data-val="true" data-val-required="The Effective Date field is required." id="EffectiveDate" name="EffectiveDate" type="text" value="13/04/2017 7:50:24 AM" data-role="datepicker" class="k-input valid" role="combobox" aria-expanded="false" aria-owns="EffectiveDate_dateview" aria-disabled="false" aria-activedescendant="59dd85ab-8203-4dc0-9c78-3e36cfb1ed0f_cell_selected" aria-required="true" aria-invalid="false" aria-describedby="EffectiveDate-error" style="width: 100%;">

the warning:

The specified value "13/04/2017 7:50:24 AM" does not conform to the required format, "yyyy-MM-dd".

 

Additionally, I went to your linked demo and it two outputs 2 warnings:

The specified value "5/6/1998 12:00:00 AM" does not conform to the required format, "yyyy-MM-dd". tag-helper:339

The specified value "MMMM yyyy" does not conform to the required format, "yyyy-MM-dd".  tag-helper: 344

[Stefan]

Hello Allan,

Apologies for the delayed response, we are short staff due to a national holiday.

I was able to observe the same warnings on my end, I noticed that the values are still bound as expected even if the warnings are displayed.

I will forward this to our developers for further investigation:

https://github.com/telerik/kendo-ui-core/issues/3053

Additionally, I updated your Telerik points for bringing this to our attention.

Regards,
Stefan
Telerik by Progress

[Ramanji]

Hi,

We are using 2017.2.504, we are setting culture en-GB but we get error whenever we select date which is more than 12. I have select 16th June (16/06/2017) but we can't post back as there is validation error which says "must be valid date." We have set globalization in web.config and also added all the scripts as shown in documentation. We didn't have this issue in our previous projects.

What could be the issue?

Thanks

[Tsvetina]

Hello Ramanji,

Can you describe exactly what you did to match the client-side and server-side cultures in your project? Did you follow the instructions provided in the following link or you meant something else?
Match Cultures
Usually, this is enough to avoid errors like the one you quoted.

Alternatively, you can overwrite the validation function for dates used by the Validator, as described here:
Globalized Dates and Numbers Are Not Recognized As Valid When Using the Validator

Regards,
Tsvetina
Progress Telerik