日期输入字段DD/MM/YYYY与输入类型文本

我想输入日期，但不使用日期格式选项的HTML5。日期输入字段DD/MM/YYYY与输入类型文本

所以我们可以说，我的输入是

<input type="text" id="dateField" />

允许的字符只有数字和“/”

有什么办法，使这个领域只接受数字和“ /”（不使用输入 type="date"）

UPDATE目的不是使用HTML5。

来源

2016-09-04 Kain India

为什么不能只需使用日期输入类型，因为它默认为'型= text'如果浏览器不支持'date'类型？ –

因为我还需要使它在不支持type = date的浏览器上工作得很好。@ DavidThomas –

您可以测试这个代码

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
    <style type="text/css"> 
     .errInput{ 
      border-color: rgba(255,0,0,0.5); 
     } 
    </style> 
    <script type="text/javascript"> 
     function checkDate(e){ 
    $(e).removeClass("errInput"); 
    var string = $(e).val(); 
    var theDate = string.split("/"); 
    var err = false; 
    switch (theDate.length){ 

     case 0: 
      break; 
     case 1: 
      if (checkDay(theDate[0]) == false){ 
       $(e).addClass("errInput"); 
       return; 
      } 
      if (theDate[0].length > 1){ 
       $(e).val($(e).val() + "/"); 
      } 
      else{ 
       $(e).val("0"+ $(e).val() + "/"); 
      } 
      break; 
     case 2: 
      if (theDate[0] == "" || theDate[0].length ==0){ 
       $(e).addClass("errInput"); 
       return; 
      } 
      if (checkDay (theDate[0]) == false){ 
       $(e).addClass("errInput"); 
       return; 
      } 
      if (checkMonth(theDate[1]) == false){ 
       $(e).addClass("errInput"); 
       return; 
      } 
      if (theDate[1].length > 1) 
      $(e).val($(e).val() + "/"); 
      else if(theDate[1].length == 1 && parseInt(theDate[1]) > 3) 
       $(e).val(theDate[0] + "/0"+theDate[1]+"/"); 
      break; 
     case 3: 
      if (theDate[0] == "" || theDate[0].length ==0){ 
       $(e).addClass("errInput"); 
       return; 
      } 
      if (theDate[1] == "" || theDate[1].length ==0){ 
       $(e).addClass("errInput"); 
       return; 
      } 
      if (checkDay (theDate[0]) == false){ 
       $(e).addClass("errInput"); 
       return; 
      } 
      if (checkMonth(theDate[1]) == false){ 
       $(e).addClass("errInput"); 
       return; 
      } 
      if (theDate[1].length == 1){ 
       $(e).val(theDate[0] + "/0"+theDate[1]+"/" + theDate[2]); 
      } 
      if (checkYear(theDate[2]) == false){ 
       $(e).addClass("errInput"); 
       return; 
      } 
      return true; 
      break; 
     default: 
     $(e).addClass("errInput"); 
     err = true;  
     break; 
    } 
} 
function checkDay (d){ 
    var MAXDAY = 12; 
    if (d.length ==0 || d == ""){ 
     return false; 
    } 
    for (var i = 0 ; i < d.length ; i++){ 
     if (d.charAt(i) > "9" || d.charAt(i) < "0" ) { 
      return false; 
     } 
    } 
    if(parseInt(d) > MAXDAY || parseInt(d) < 1){ 
     return false; 
    } 
    if(d.length > 2){ 
     return false; 
    } 
    return true; 
} 
function checkMonth (m){ 
    var MAXMONTH = 31; 
    if (m.length == 0 || m == ""){ 
     return false 
    } 
    for (var i = 0 ; i < m.length ; i++){ 
     if (m.charAt(i) > "9" || m.charAt(i) < "0" ) { 
      return false; 
     } 
    } 
    if(parseInt(m) > MAXMONTH || parseInt(m) < 1){ 
     return false; 
    } 
    if(m.length > 2){ 
     return false; 
    } 
    return true; 
} 
function checkYear (y){ 
    if (y.length == 0 || y == ""){ 
     return false; 
    } 
    var MAXYEAR = new Date(); 
    MAXYEAR = MAXYEAR.getFullYear(); 
    for (var i = 0 ; i < y.length ; i++){ 
     if (y.charAt(i) > "9" || y.charAt(i) < "0")  { 
      return false; 
     } 
    } 
    if(parseInt(y) < 1900 || parseInt(y) > MAXYEAR){ 
     return false; 
    } 
    if(y.length > 4){ 
     return false; 
    } 
    return true; 
} 
    </script> 
</head> 
<body> 
<input type="text" id="dateField" onkeyup="checkDate(this)" /> 
</body> 
</html>

来源

2016-09-04 10:04:09 Igbaryya

您可以使用HTML5 input pattern attribute用正则表达式一起：

<input type="text" id="dateField" pattern="[\d/]"/>

来源

2016-09-04 09:27:22 Daniel

目的不是使用任何HTML 5 attr –

@KainIndia，这是从未说过的 - 听起来更像他不想要标准HTML5日期输入的日期格式 – Daniel

您可以使用IE支持11+

<input type="text" pattern="\d{2}\/\d{2}\/\d{4}" />

输入模式如果还不是你应该的选项去一个JavaScript解决方案挂钩到该领域的值的变化

var pattern = /\d{2}\/\d{2}\/\d{4}/; 
document.querySelector("input").addEventListener("keyup", function(ev){ 
    var value = ev.target.value; 
    if(!pattern.test(value){ 
    //value of the field is not the one you are looking for 
    // handle this 
    } 
})

来源

2016-09-04 09:28:35 eltonkamami

您可以尝试这样来限制输入字段中允许的字符。你需要深入一点才能限制实际的格式。

$('#date').on('input', function() { 
 
    this.value = this.value.replace(/[^0-9/]/g, ''); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" id="date" maxlength="10" />

您可能还需要考虑使用日期选择器插件（如jQuery UI Datepicker或类似）

来源

2016-09-04 09:36:11 billynoah

试试这个：

<input name="number" onkeyup="if (/[^\d/]/g.test(this.value)) this.value = this.value.replace(/[^\d/]/g,'')">

来源

2016-09-04 09:48:28 Ish

日期输入字段DD/MM/YYYY与输入类型文本

回答

相关问题