Blog do Regis –; Meus aprendizados

jQuery Mask Plugin is a great Javascript library to format fields for presentation and/or to force a properly input by users.

Here, I show how to deal with input or another HTML element to display dates when the source date has a different format from target element.

Example:

• We have a datetime with Year-Month-Day Hour:Minute:Seconds and need to show only the Year/Month/Day part.
• We have da date in Year-Month-Day and need to format to Day/Month/Year.

jQueryMask is very simple to use. It do not need to much to mask whatever you need. Take a look at examples on his website.

If you need to format a simple date field (even in a non-input element), just use the code below.

jQuery('[data-role="date"]).mask("TC99/M9/D9", {
        placeholder: "____/__/__",
        translation: {
            "D": {pattern: /[0-3]/, optional: false, recursive: true},
            "M": {pattern: /[01]/, optional: false, recursive: true},
            "T": {pattern: /[12]/, optional: false, recursive: true},
            "C": {pattern: /[09]/, optional: false, recursive: true}
        }
    });

The code above can mask and pre-validate dates in YEAR/MONTH/DAY format.

With an input like

<;input type="text" data-role="date" value="2018-06-11 15:47" />;

would be changed his value to 2018/06/11.

If you try to type another date (after clear, of course) you cannot begin with a number different from 1 or 2. This reason is that our mask have a translation to be done when allowing chars. If the pattern does not match, the char is erased.

The meaning of “;TC99/M9/D9”; mask is:

• Must begin with 1 or 2 (Translation T: /[12]/ –; Custom format)
• Must have number 0 or 9 (Translation C: /[09]/ –; Custom format)
• Must have a number (any) (Translation 9 –; MaskPlugin Core format)
• Must have a number (any) (Translation 9 –; MaskPlugin Core format)
• A slash will be added automatic ( / )
• Must have number 0 or 1 (Translation M: /[01]/ –; Custom format)
• Must have a number (any) (Translation 9: MaskPlugin Core format)
• A slash will be added automatic ( / )
• Must have number 0, 1, 2 or 3 (Translation D: /[0-3]/ –; Custom format)
• Must have a number (any) (Translation 9: MaskPlugin Core format)

Of course, there is no real validation. You can type “;2999/19/39”; and this is not a valid date, but is almost done.

So, to format in another way, just change mask parameter order.

But, if the source date is in a different pattern, like MONTH/DAY/YEAR, the mask do not work. The date output for “;06/11/2018 15:40”; will be weird “;1018/15/0“;.

To handle different date formats will be needed more than simple mask. We will need a function.

Look the code below

        var maskBehaviorDateTime = function (val, e, field) { // This function must return a MASK
                    var msk = "TC99/M9/D9"; // Our desired format
                    var v = field.is('input') ? field.val() : field.text(); // is a input or another html element??
                    v = v.replace(/\D/g, ''); // stripe non digits
                    if (v != '') { // has value?
                        if ((/^[01]\d[0-3]\d\d{4}$/).test(v)) { //test if pattern match Month/Day/Year only
                            v = v.replace(/^(\d{4})(\d{2})(\d{2})$/, '$3/$2/$1');
                        } else if ((/^[01]\d[0-3]\d\d{4}[012]\d[0-5]\d$/).test(v)) { //test if pattern match Month/Day/Year Hour:Minute
                            v = v.replace(/^(\d{2})(\d{2})(\d{4})(\d{2})(\d{2})$/, '$3/$2/$1');
                            // If we need to show hour and minute, returned mask must be changed too
                            // v = v.replace(/^(\d{2})(\d{2})(\d{4})(\d{2})(\d{2})$/, '$3/$2/$1 $4:$5');
                            // msk = 'TC99/M9/D9 h9:m9'; // h and m must be exists in Translation options
                        }
                        field.is('input') ? field.val(v) : field.text(v);
                    }
                    return msk;
                },
                optionsDateTime = {
                    placeholder: "____/__/__",
                    translation: {
                        "D": {pattern: /[0-3]/, optional: false, recursive: true},
                        "M": {pattern: /[01]/, optional: false, recursive: true},
                        "T": {pattern: /[12]/, optional: false, recursive: true},
                        "C": {pattern: /[09]/, optional: false, recursive: true},
                        "h": {pattern: /[0-2]/, optional: true, recursive: true},
                        "m": {pattern: /[0-5]/, optional: true, recursive: true}
                    }
                };
        jQuery('[data-role="date"]').mask(maskBehaviorDateTime,  optionsDateTime);

Now we have two more Translation Pattern (h and m). h means that the n-index position must have numbers 0, 1 or 2 e m numbers between 0 e 5. Keep in mind that CASE matters.

With the above code, we can format and show date in several ways. just change .test() e .replace() pattern to fill your desired pattern.

This is the code that I am using to format Database datetime fields with YEAR-MONTH-DAY HOUR:MINUTE:SECOND in html elements with DAY/YEAR/MONTH HOUR:MINUTE

    var maskBehaviorDateTime = function (val, e, field) {
            // Caso já exista um valor, o formata no padrão dd/mm/yyyy com o opcional hh:mm:ss
            var msk = "TC99/M9/D9 h9:m9:s9";
            if (field.attr("data-original-value") == undefined) {
                var o = field.is('input') ? field.val() : field.text();
            } else {
                var o = field.attr("data-original-value");
            }
            v = o.replace(/\D/g, '');
            if (v != '') {
                field.attr("data-original-value") == undefined &;&; field.attr("data-original-value", o);
                if ((/^[12][09]\d{2}[01]\d[0123]\d$/).test(v)) { // year/month/day
                    v = v.replace(/^(\d{4})(\d{2})(\d{2})$/, '$3/$2/$1');
                    msk = "D9/M9/TC99";
                } else  if ((/^[12][09]\d{2}[01]\d[0123]\d[012]\d[0-5]\d$/).test(v)) { // year/month/day hour:minute
                    v = v.replace(/^(\d{4})(\d{2})(\d{2})(\d{2})(\d{2})$/, '$3/$2/$1 $4:$5');
                    msk = "D9/M9/TC99 h9:m9";
                } else if ((/^[12][09]\d{2}[01]\d[0123]\d[012]\d[0-5]\d[0-5]\d$/).test(v)) { // year/month/day hour:minute:second
                    v = v.replace(/^(\d{4})(\d{2})(\d{2})(\d{2})(\d{2})(\d{2})$/, '$3/$2/$1 $4:$5:$6');
                    msk = "D9/M9/TC99 h9:m9:s9";
                }
                field.is('input') ? field.val(v) : field.text(v);
            }

            return msk;
        },
        optionsDateTime = {
            placeholder: "__/__/____",
            translation: {
                "D": {pattern: /[0-3]/, optional: false, recursive: true},
                "M": {pattern: /[01]/, optional: false, recursive: true},
                "T": {pattern: /[12]/, optional: false, recursive: true},
                "C": {pattern: /[09]/, optional: false, recursive: true},
                "h": {pattern: /[0-2]/, optional: true, recursive: true},
                "m": {pattern: /[0-5]/, optional: true, recursive: true},
                "s": {pattern: /[0-5]/, optional: true, recursive: true}
            },
        };
    jQuery('[data-role="date"]').mask(maskBehaviorDateTime,  optionsDateTime);

With an input like

<;input type="text" data-role="date" value="2018-06-11 15:40">;

Output will be

11/06/2018 15:40

Hope this help you!