如何使用javascript(没有JQuery)进行日期屏蔽?

时间:2015-06-29 05:48:10

标签: javascript html locale masking

<![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>

如果区域设置等于'zh_CN',,则屏蔽将为'9999年99月99日'。否则,它将是'99/99/9999' 当我删除if else命令时,它可以工作。但是如果我把if else命令放在里面,它就不起作用了。

我该如何解决?

5 个答案:

答案 0 :(得分:14)

查看以下代码..

&#13;
&#13;
<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"
>
&#13;
&#13;
&#13;

希望这就是你要找的东西!

答案 1 :(得分:6)

这是一个更完整的屏蔽,允许退格,如果在任何月份小于10之前忘记输入零,它将添加一个,以及一个月的一点帮助。你必须原谅我的javascript,但嘿它的工作正常吗?

<html>
<input placeholder="mm/dd/yyyy" onkeyup="this.value = fixDatePattern(this.value)">

<script>
  function fixDatePattern(currDate) {
    var currentDate = currDate;
    var currentLength = currentDate.length;
    var lastNumberEntered = currentDate[currentLength - 1];

    if (!isNumber(lastNumberEntered)) {
      return currentDate.substring(0, currentLength - 1);
    }

    if (currentLength > 10) {
      return currentDate.substring(0, 10);
    }

    if (currentLength == 1 && currentDate > 1) {
      var transformedDate = "0" + currentDate + '/';
      dateCountTracker = 2;
      currentLength = transformedDate.length;
      return transformedDate;
    } else if (currentLength == 4 && currentDate[3] > 3) {
      var transformedDate = currentDate.substring(0, 3) + "0" + currentDate[3] + '/';
      dateCountTracker = 5;
      currentLength = transformedDate.length;
      return transformedDate;
    } else if (currentLength == 2 && (dateCountTracker != 2 && dateCountTracker != 3)) {
      dateCountTracker = currentLength;
      return currentDate + '/';
    } else if (currentLength == 5 && (dateCountTracker != 5 && dateCountTracker != 6)) {
      dateCountTracker = currentLength;
      return currentDate + '/';
    }
    dateCountTracker = currentLength;
    return currentDate;
  }

  function isNumber(n) {
    return !isNaN(parseFloat(n)) && isFinite(n);
  }
</script>

答案 2 :(得分:1)

在保留退格功能的同时,让当前接受的答案正常工作时遇到了一些麻烦。这是我的解决方案。它会保留退格,并且在输入跟随之后也不会显示斜杠。

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
}

我还为此代码段here创建了一个github要点。

答案 3 :(得分:0)

试用此代码,当您在输入框中输入时,这将以mm / dd / yyyy格式格式化您的日期。 在输入框上创建一个onchange事件,并使用输入日期调用date_formator函数。

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;
}

答案 4 :(得分:-3)

这非常有效(在jquery掩码页面的控制台中尝试了它)

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

但如果您希望掩码格式显示在输入字段中,则需要将其作为占位符属性传递

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

希望这会有所帮助