Hello
I'm displaying a time in an input field with maskedTextbox on it. I allow the user to specify his preferred time format:
hh:mm:ss or hh.mm.ss. or hh/mm/ss (hours:minutes:seconds)
It works fine working with the separator : and / but not with . (dot). Here is a working example showing you that the dot is overwritten by a coma:
<!DOCTYPE html><html><head> <title></title> <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.common.min.css"> <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.default.min.css"> <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.default.mobile.min.css" /> <script src="http://kendo.cdn.telerik.com/2017.3.1026/js/jquery.min.js"></script> <script src="http://kendo.cdn.telerik.com/2017.3.1026/js/kendo.all.min.js"></script> <script src="http://kendo.cdn.telerik.com/2017.3.1026/js/cultures/kendo.culture.de-DE.min.js"></script> <!-- This works fine <script src="http://kendo.cdn.telerik.com/2017.3.1026/js/cultures/kendo.culture.de-CH.min.js"></script> --></head><script type="text/javascript"> $(document).ready(function() { kendo.culture("de-DE"); // Same problem with 'de-AT' // kendo.culture("de-CH"); // This works fine $(".maskTimer").kendoMaskedTextBox({ mask: "h0.t0.t0", rules: {h: /[0-2]/, t: /[0-5]/} }); });</script><body> <div> <input id="time" class="maskTimer" style="width: 100px;" value="120000"> </div></body></html>
After starting the script you see the time this way: 12,00,00 (coma instead of dot as defined in kendoMaskedTextBox -> mask). If you use colon (:) or slash (/) it works fine as well. It also works using f.e. the culture 'de-CH' but not for 'de-AT' (same behaviour as 'de-DE'). I have no clue about this behaviour for other countries. I have no idea why/how the coma overwrites my defined time format. Maybe I'm doing something simple wrong.
Another weird behaviour: If you delete the time in the input field you can see the correct mask: __.__.__ but when you start entering a new time the dot will be replaced by a coma as soon as you pass the first dot (by typing). All weird to me. As far as I know Germany (de-DE) and Austria (de-AT) use : or . as time separator and not a coma, so this can't be any default value for those countries. Can you explain me this or even better what I did wrong?
Regards
4 Answers, 1 is accepted
Thank you for the example.
The described result occurs because the ","a comma is treated as a decimal separator and in de-DE the decimal separator is "," comma.
This can be observed if the same number is displayed with the en-US culture and the de-DE culture.
In this case, I can suggest as a workaround setting the mask with commas in the configuration and this will convert it to dots:
http://dojo.telerik.com/oKuGO
I hope this is helpful.
Regards,
Stefan
Progress Telerik
Rank 1
Iron
Thank you for the explanation and sample. It is correct that f.e. in Germany the coma separates digits. But we are talking here about a masked textbox (with anything possible in it: chars and/or digits) and not about a numeric textbox (only numbers). No need to answer on that but in this case I don't understand why the masked textbox is considering country specific settings.
Regards
The Kendo UI MasketTextBox used a decimal placeholder, a thousand placeholder, and a currency symbol which are localized. This is the default widget behavior and changing it can cause a breaking change in the widget.
https://docs.telerik.com/kendo-ui/controls/editors/maskedtextbox/overview#configuration-Literals
As the "en-US" is the default culture, it could be explicitly set to the widget which will prevent setting another culture on the page affecting the result:
http://dojo.telerik.com/oKuGO/3
Regards,
Stefan
Progress Telerik
Rank 1
Iron