自定义日期输入字段没有任何日期选择器 [英] Custom Date Input Field without any datepicker

问题描述

我一直在处理一个表单元素，在那里我想到了一个日期字段，而没有在datepicker中构建任何浏览器或任何其他支持基于jquery库的datepicker。我想实现简单的日期选择器，它对每个人都是用户友好的。

I have been working on a form elements where I got an idea to implement a date field without any browser built in datepicker or any other supporting jquery library based datepicker. I want to achieve simple datepicker where it will be user-friendly for everyone.

我对2种不同的风格有所了解并尝试实现这一目标但是并没有像我一样想。也许我必须写一些jQuery左右但不确定要写什么。

I have an idea of 2 different styles and trying to achieve this but not getting exactly as I want. Maybe I have to write some jQuery or so but not sure what to write.

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

What do I want? In the above image, it shows the input field with placeholders DD/MM/YYYY in first where when someone enters He should be to enter the date format in the above style and the forward slash which is a date separator should stay intact.

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

(Another Advanced Idea) If possible we can set a range limit for the field for DD only 1-31 can be entered and MM only 1 to 12 and in YYYY 0 to current year.

.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>

推荐答案

我做了一些改动您的 HTML ，相同的 CSS 和新的 JS 代码。
请参阅：

I have done some changes on your HTML, same CSS and new JS code. Please refer :

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

你可以在这里查看演示

我希望这对你有用。 ：）

I hope this will work for you. :)

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

Note : I have done some validation, if you don't want please ignore it.

这篇关于自定义日期输入字段没有任何日期选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！