Html 不带任何日期选择器的自定义日期输入字段

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

我有两种不同风格的想法，并试图实现这一点，但并没有得到确切的我想要的。也许我必须写一些jQuery之类的东西，但不确定要写什么

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

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

。自定义日期字段{
字体系列：Arial，无衬线；
边框：1px实心#dddddd；
填充：20px；
字体大小：12px；
边缘底部：30px；
}
.自定义日期字段输入{
背景色：#e4ebef；
边界：无；
填充物：5px10px；
}
.自定义日期字段范围{
显示：块；
字体大小：12px；
}
.自定义日期字段标签{
宽度：30%；
显示：内联块；
浮动：左；
字号：18px；
}

输入描述

DOB输入日期格式DD/MM/YYYY

我对你的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>

DOB输入日期格式DD/MM/YYYY

或

输入日期

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 = '';
    }
}

var el=document.getElementById（“日期字段”）；
el.onkeyup=功能（evt）{
如果（（evt.keyCode>=48&&evt.keyCode=96&&
evt.keyCode 31）| |（size==5&&Number（document.getElementById（'dateField'）.value.split（'/'）[1]）>12）| |（size>=10&&Number（document.getElementById（'dateField'）.value.split（'/'）[2]）>2017））{
警报（“无效日期”）；
document.getElementById（'dateField'）。值=“”；
返回；
}
if（（size==2&&document.getElementById（'dateField'）.value<32）| |（size==5&&Number（document.getElementById（'dateField'）.value.split（'/'））[1]）<13））{
document.getElementById（'dateField'）。值+='/'；
} 
}否则{
警报（'请输入有效日期'）
document.getElementById（'dateField'）。值=“”；
}
}

你可以在这里查一下

我希望这对你有用。：）

---

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

我已经对您的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>

DOB输入日期格式DD/MM/YYYY

或

输入日期

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 = '';
    }
}

var el=document.getElementById（“日期字段”）；
el.onkeyup=功能（evt）{
如果（（evt.keyCode>=48&&evt.keyCode=96&&
evt.keyCode 31）| |（size==5&&Number（document.getElementById（'dateField'）.value.split（'/'）[1]）>12）| |（size>=10&&Number（document.getElementById（'dateField'）.value.split（'/'）[2]）>2017））{
警报（“无效日期”）；
document.getElementById（'dateField'）。值=“”；
返回；
}
if（（size==2&&document.getElementById（'dateField'）.value<32）| |（size==5&&Number（document.getElementById（'dateField'）.value.split（'/'））[1]）<13））{
document.getElementById（'dateField'）。值+='/'；
} 
}否则{
警报（'请输入有效日期'）
document.getElementById（'dateField'）。值=“”；
}
}

你可以在这里查一下

我希望这对你有用。：）

---

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

“我想实现一个简单的日期选择器，它将对每个人都友好”–然后使用用户已经习惯的本机日期选择器的

日期

字段，再加上旧浏览器的polyfill，而不是强迫我手动键入各个日期部分。这不是用户友好的，但恰恰相反。

date

字段与本机日期选择器不适用于所有浏览器。因此，我想实现一些易于使用minor javascriptI的功能。我知道，这就是为什么我说对较旧的浏览器使用polyfill。“我想实现简单的日期选择器，使其对所有人都友好”—然后使用用户已经习惯的本机日期选择器的

date

字段，另外，对于较旧的浏览器，可能还需要一个polyfill，而不是强制我手动键入各个日期部分。这不是用户友好的，但恰恰相反。

date

字段与本机日期选择器不适用于所有浏览器。所以我想实现一些易于使用的小JavaScription，我知道，这就是为什么我说在旧浏览器中使用polyfill。这有点类似，但在我尝试时没有起作用。它只对DD值有效，之后就不会了。无法满足您的要求。您能再解释一下吗？您的代码很好，但在输入DD值后停止。输入日期后，正斜杠加上，当我添加月份时，验证不起作用，也没有正斜杠。你的代码只适用于日期清理，我试图编辑它，但没有帮助。我已经更新了代码。以前不是最新的代码，我现在已经更新了。请检查并让我知道是否还有任何问题。@Maqk正在工作？这有点类似，但在我尝试时没有工作。它仅适用于DD值和