Time separator overwritten by coma

5 posts, 1 answers
  1. Tayger
    Tayger avatar
    182 posts
    Member since:
    Jan 2015

    Posted 02 Jan Link to this post

    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>
     
        <!-- This works fine
        -->
    </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

  2. Answer
    Stefan
    Admin
    Stefan avatar
    1890 posts

    Posted 04 Jan Link to this post

    Hello, Tayger,

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Tayger
    Tayger avatar
    182 posts
    Member since:
    Jan 2015

    Posted 15 Jan in reply to Stefan Link to this post

    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

  4. Stefan
    Admin
    Stefan avatar
    1890 posts

    Posted 17 Jan Link to this post

    Hello, Tayger,

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. Tayger
    Tayger avatar
    182 posts
    Member since:
    Jan 2015

    Posted 22 Jan in reply to Stefan Link to this post

    Well, we could discuss this forth and back. Telerik is creating the widgets so they rule. ;) You're workaround works excellent, so thank you again for it!
Back to Top