Question

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

我对2种不同的风格有所了解，并尝试实现这一目标，但没有完全按照我的意愿得到。也许我必须写一些jQuery左右，但不知道该写些什么。

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

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

＆＃13;

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

＆＃13;

                            SELECT * FROM add_legrec_recipe 
                            WHERE name LIKE '%search%' 
                                OR meal_type='08' 
                                OR main_ingredients LIKE '%,12,%' 
                                OR ingredient='03'
                                OR id IN ("12,10,13")
                            ORDER BY id DESC LIMIT 0,5

＆＃13;

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

我希望这对你有用。：）

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

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

1 个答案: