Question

我希望日期输入在年份有4位数后停止输入。我尝试使用HTML中的min和max组件，但它仍然允许您键入删除第一个数字。见例1.

参见示例2，可以输入超过4位的年份。

以下是我的两个测试运行，我也尝试使用HTML中的“onchange”组件使用JS创建一个方法，我尝试过，但这些似乎都不起作用......

https://fiddle.jshell.net/jaelsvd/98xww3qg/9/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Example 1</label>
 <input id="date1" type="date" min="1990-12-31" max="2050-12-30">
  <br />
   <label>Example 2</label>
  <input id="date2" type="date" />

Answer 1

如果您希望html5内置验证，请设置maxlength并使用pattern和required：

＆＃13;

<form>
  <label for ="date2">Example 2</label>
  <input id="date2" type="date" pattern="\d{4}" maxlength="4"  required />
  <button>
    Submit
  </button>
</form>

＆＃13;

Answer 2

为了获得更大的灵活性，您可以使用文本框输入并检查按键事件，并决定接受或拒绝按下的键，如下所示：

<input type="text" id="my_date" placeholder="MM/dd/YYYY" />

<script>
    var myDate = document.querySelector('#my_date');
    myDate.onkeypress = function (evt) {
        var _evt = evt || windows.event;
        var keyCode = _evt.keyCode || _evt.charCode;
        var sKey = String.fromCharCode(keyCode);
        // TODO: test for key value

        // Test for text lenth
        var text = this.value;
        // TODO: test value, return true to accept, false to reject.
        if (text.length > 10) {
            alert(text + ' length reach quota.');
            return false;
        }
        else {
            return true;
        }
    };
</script>

Answer 3

对于您的情况，可以使用：（1）FormValidation（this link），（2）DateRangePicker - Jquery（this link）

Answer 4

问题在于组件＆＃34; date＆＃34;按键时设置000。我不得不改变条件并先阅读000，然后设定条件。这很有效。

＆＃13;

var myDate = document.querySelector('#my_date');
    myDate.onkeypress = function (evt) {
        var _evt = evt || windows.event;
        var keyCode = _evt.keyCode || _evt.charCode;
        var sKey = String.fromCharCode(keyCode);
        
        var text = this.value;
         var res = text.substring(0, 3);
         var res2 = text.substring(0,2);
         var res3  = text.substring(0,1);
         if(res === "000" || res2 === "00" || res3 ==="0"){
             return true;
         }else{
            if (text.length >= 9) {
                return false;
            }
            else {
                return true;
            }
         }
        
    };

＆＃13;

<input type="date" id="my_date" placeholder="MM/dd/YYYY" />

＆＃13;

如何验证输入日期html年份？

4 个答案: