7 
<![CDATA[
    var $ = jQuery;
    String locale = getUserLocale();
    $(document).ready(function() {

        if (!isEmptyNull(locale) && locale.equals("zh_CN")) {
            $("input[id*='text12']").mask('9999年99月99日');
        }
        else {
            $("input[id*='text12']").mask('99/99/9999');
        }
    });
]]>

<p:calendar id="text12" styleClass="calendar" maxlength="10" pattern="#
{pc_Test.dateDisplayFormat}"></p:calendar>

If the locale is equal to 'zh_CN', the masking would be '9999年99月99日'. Otherwise, it would would be '99/99/9999'.
When I remove the if else command, it works. But if I put the if else command inside, it doesn't work.

How do I solve it?

Improve this question

5 Answers 5

Reset to default
30

Check out the below code..

<input
    type="text"
    name="date"
    placeholder="dd/mm/yyyy"
    onkeyup="
        var v = this.value;
        if (v.match(/^\d{2}$/) !== null) {
            this.value = v + '/';
        } else if (v.match(/^\d{2}\/\d{2}$/) !== null) {
            this.value = v + '/';
        }"
    maxlength="10"
>

<input
    type="text"
    name="date"
    placeholder="mm/dd/yyyy"
    onkeyup="
        var v = this.value;
        if (v.match(/^\d{2}$/) !== null) {
            this.value = v + '/';
        } else if (v.match(/^\d{2}\/\d{2}$/) !== null) {
            this.value = v + '/';
        }"
    maxlength="10"
>
<input
    type="text"
    name="date"
    placeholder="yyyy/mm/dd"
    onkeyup="
        var v = this.value;
        if (v.match(/^\d{4}$/) !== null) {
            this.value = v + '/';
        } else if (v.match(/^\d{4}\/\d{2}$/) !== null) {
            this.value = v + '/';
        }"
    maxlength="10"
>
<input
    type="text"
    name="date"
    placeholder="yyyy年mm月dd"
    onkeyup="
        var v = this.value;
        if (v.match(/^\d{4}$/) !== null) {
            this.value = v + '年';
        } else if (v.match(/^\d{4}年\d{2}$/) !== null) {
            this.value = v + '月';
        }"
    maxlength="10"
>

Hope this is what you are looking for!

Improve this answer
Sign up to request clarification or add additional context in comments.

10 Comments

Thanks for ur answer! But what I want is to mask the date format according to the different locale. For example, if my locale equals to en_US, the mask will be display 99/99/9999 which is __/__/____ But if my locale equals to zh_CN, the mask will be display ____ 年__月__日 Any ideas for this? Thanks
Hi @binbin! In your case I guess you have to detect the location of the user and than change the "/" with local language! In cases like RTF reading you just need to change the order of the if and else if conditions.
Hi @Pratik Shah, Thanks for ur examples. Let me try the code to see whether it work for me.
HI @Pratik Shah It doesn't work. Can you give me some suggestion or examples that do the masking in the javascript like what I did above? Thanks!
Hi @SelvaGanapathi, suggested solution is only for the length of the input and not for the value validation.
|
3

I had some trouble getting the currently accepted answers to work properly while retaining the ability to backspace. This was my solution. It retains backspacing and also doesn't show the slash until the number following it is typed.

const maskDate = value => {
  let v = value.replace(/\D/g,'').slice(0, 10);
  if (v.length >= 5) {
    return `${v.slice(0,2)}/${v.slice(2,4)}/${v.slice(4)}`;
  }
  else if (v.length >= 3) {
    return `${v.slice(0,2)}/${v.slice(2)}`;
  }
  return v
}

I've also create a github gist for this snippet here.

Improve this answer

1 Comment

Nice and clean. Though this only works if the user always enters 2-digit months and days. Handling 1-digit day/month gets trickier (like 1/1/1970).
2

I have solved this issue a simple function(without regular expressions and only for the format 'dd/mm/yyyy'). And the important thing is that My function pays attention to the maximum values of the date(31) and month(12). For example, You can not input 32/11/2000 or 20/13/2000.

function maskForDate(value) {
    if (value.length > 10) {
        return value.substring(0, 10);
    }

    switch (value.length) {
        case 1: 
            if (value > 3) {
                value = "3";
            }
            break;
        case 2: 
            if (value > 31) {
                value = "31";
            }
            break;
        case 3:
        case 4:
            if (value[2] !== "/") {
                value = value.substr(0, 2) + "/" + value[2];
            }
            if (value[3] > 1) {
                value = value.substr(0, 3) + "1";
            }
            break;
        case 5: 
            if (value.substr(3, 2) > 12) {
                value = value.substr(0, 3) + "12";
            }
            break;
        case 6:
        case 7:
            if (value[5] !== "/") {
                value = value.substr(0, 5) + "/" + value[5];
            }
            if (value[6] < 1) {
                value = value.substr(0, 6) + "1";
            }
            break;
        default: 
            break;
    }

    return value;
}
Improve this answer

Comments

-1

Try out this code, this will format your date in mm/dd/yyyy format as you type it in the input box. Create an onchange event on the input box and call the date_formator function with the input date.

function date_formator(date) {

    date = date.replace('//', '/');
    var result = date.split("/");

    var length = result.length;

    // Append "/" after the last two charas, if more than 2 charas then remove it
    if (length <= 2 && result[length - 1] != "") {
        var last_two_digits = result[length -1];
        if (last_two_digits.length >= 2) {
            date = date.slice(0, -last_two_digits.length);
            date = date + last_two_digits.slice(0,2) + "/";
        }
    }

    if (typeof result[2] != "undefined") {
        var year = result[2];
        if (year.length > 4) {
            date = date.slice(0, -year.length);
            year = year.slice(0, 4);
            date = date + year;
        }
    }
    return date;
}
Improve this answer

Comments

-4

This works quite well (tried it in console on the jquery mask page)

 if (locale !=='' && locale==='zh_CN') {
          $('#text12').mask('9999年99月99日');
          }
          else {
          $('#text12').mask('99/99/9999');
          }

but if you want the mask format to show up in the input field you need to pass it as placeholder attribute

$('#text12').attr('placeholder', '9999年99月99日')

hope this helps

Improve this answer

10 Comments

Hi @AbeCodes, Thanks for your answer. But it doesn't work for me :( For the placeholder, I'm using watermark and it's work well. Just that the mask can't show up.
@binbin try a timeout, maybe the input isnt rendered at this point, the code works fine ;) or maybe there is a problem with watermark?
I tried and i guess the problem is the if else command because when I remove the if else command, it works well. I think there is a problem with locale and i don't know why they can't get the locale properly :(
go with var locale and check via if (locale !=='' && locale==='zh_CN'). and check with console.log(locale) if a value is set.
you get a value for locale?
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.