我想輸入日期,但不使用日期格式選項的HTML5。日期輸入字段DD/MM/YYYY與輸入類型文本
所以我們可以說,我的輸入是
<input type="text" id="dateField" />
允許的字符只有數字和「/
」
/
」(不使用輸入
type="date"
)
UPDATE目的不是使用HTML5。
我想輸入日期,但不使用日期格式選項的HTML5。日期輸入字段DD/MM/YYYY與輸入類型文本
所以我們可以說,我的輸入是
<input type="text" id="dateField" />
允許的字符只有數字和「/
」
/
」(不使用輸入
type="date"
)
UPDATE目的不是使用HTML5。
您可以測試這個代碼
<!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>
您可以使用HTML5 input pattern attribute用正則表達式一起:
<input type="text" id="dateField" pattern="[\d/]"/>
目的不是使用任何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
}
})
您可以嘗試這樣來限制輸入字段中允許的字符。你需要深入一點才能限制實際的格式。
$('#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或類似)
試試這個:
<input name="number" onkeyup="if (/[^\d/]/g.test(this.value)) this.value = this.value.replace(/[^\d/]/g,'')">
爲什麼不能只需使用日期輸入類型,因爲它默認爲'型= text'如果瀏覽器不支持'date'類型? –
因爲我還需要使它在不支持type = date的瀏覽器上工作得很好。@ DavidThomas –