Поле ввода даты DD/MM/YYYY с типом ввода ввода

Я пытаюсь сделать ввод даты, но не используя формат даты вариант HTML5.Поле ввода даты DD/MM/YYYY с типом ввода ввода

Итак, давайте говорить, что мой вклад

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

Допустимые символы только цифры и «/»

Есть ли способ сделать это поле принимает только цифры и « /» (без использования входа type="date")

ОБНОВЛЕНИЕ Целью не является использование HTML5.

источник

2016-09-04 Kain India

Почему вы не можете просто использовать тип ввода даты, поскольку он по умолчанию 'типа = Text', если браузер не поддерживает' 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" />

Вы также можете рассмотреть возможность использования Datepicker плагин (как 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 с типом ввода ввода

ответ

Смежные вопросы