没有任何日期选择器的自定义日期输入字段

Question

我一直在研究一个表单元素，我想在没有任何浏览器内置日期选择器或任何其他基于 jquery 库的日期选择器的情况下实现一个日期字段。我想实现简单的日期选择器，它对每个人都是用户友好的。

我有 2 种不同风格的想法，并试图实现这一点，但没有完全达到我想要的效果。也许我必须写一些 jQuery 左右，但不知道该写什么。

我想要什么？ 在上图中，它首先显示了带有占位符 DD/MM/YYYY 的输入字段，当有人输入时，他应该以上述样式输入日期格式，并且作为日期分隔符的正斜杠应该保持不变。

（另一个高级想法） 如果可能，我们可以为字段设置范围限制，DD 只能输入 1-31，MM 只能输入 1 到 12，YYYY 0 到当前年份。

.custom-date-field {
  font-family: Arial, Sans-serif;
  border: 1px solid #dddddd;
  padding: 20px;
  font-size: 12px;
  margin-bottom: 30px;
}

.custom-date-field input {
  background-color:#e4ebef;
  border: none;
  padding: 5px 10px;
 }

.custom-date-field span {
  display: block;
  font-size: 12px;
}

.custom-date-field label {
  width: 30%;
  display: inline-block;
  float: left;
  font-size: 18px;
}

<div class="custom-date-field">
<p><label>DOB <span>Enter the description</span></label>
<input type="number" placeholder="DD/MM/YYYY" value="" />
</p>
</div>

<div class="custom-date-field">
<p><label>DOB <span>Enter the date format DD/MM/YYYY</span></label>
<input type="number" placeholder="__/__/____" value="" />
</p>
</div>

Answer 1

我对您的 HTML、相同的 CSS 和新的 JS 代码进行了一些更改。 请参考：

HTML

<div class="custom-date-field">
    <p><label>DOB <span>Enter the date format DD/MM/YYYY</span></label>
        <input id="dateField" type="text" placeholder="__/__/____" >
    </p>
</div>

或

<div class="custom-date-field">
    <p><label>DOB <span>Enter the date</span></label>
        <input id="dateField" type="text" placeholder="DD/MM/YYYY" >
    </p>
</div>

CSS和你的一样

JS

var el = document.getElementById("dateField");

el.onkeyup = function(evt) {
    if((evt.keyCode >= 48 && evt.keyCode <= 57) || (evt.keyCode >= 96 && 
evt.keyCode <= 105)) {
       evt = evt || window.event;

       var size = document.getElementById('dateField').value.length;

       if ((size == 2 && document.getElementById('dateField').value > 31)|| (size == 5 && Number(document.getElementById('dateField').value.split('/')[1]) > 12) || (size >= 10 && Number(document.getElementById('dateField').value.split('/')[2]) > 2017)) {
           alert('Invalid Date');
           document.getElementById('dateField').value = ''; 
           return;
       }

      if ((size == 2 && document.getElementById('dateField').value < 32)|| (size == 5 && Number(document.getElementById('dateField').value.split('/')[1]) < 13)) {
          document.getElementById('dateField').value += '/';        
      } 

    } else { 
        alert('Please enter valid date.')
        document.getElementById('dateField').value = '';
    }
}

你可以在这里查看Demo

我希望这对你有用。 :)

注意：我已经做了一些验证，如果你不想要请忽略它。