jquery - 如何只接受输入类型 ='time' 中的 future 或当前时间?

标签 jquery html

我有一个带有 type="time"input 字段。如何让这个字段只接受当前或 future 的时间?

如果用户输入了错误的时间,则应显示一条消息,要求重新输入时间。这里的 future 意味着最多 2 天。

这里我只是使用 jquery 显示当前时间。

function validDate(){
  var today = new Date().toISOString().split('T')[0];
  document.getElementsByName("date")[0].setAttribute('min', today);
}

$(function() {
  $('input[type="time"][value="now"]').each(function() {
    var d = new Date(),
        h = d.getHours(),
        m = d.getMinutes();
    if (h < 10) h = '0' + h;
    if (m < 10) m = '0' + m;
    $(this).attr({
      'value': h + ':' + m
    });
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body onload="validDate()">
    <div class="form-group">
      <p>Date<span>*</span></p>
      <input type="date" name="date" id="date" class="form-control input-sm " required />
    </div>
    <div>
      <p>Time <span>*</span></p>
      <input type="time" value="now" name="time" id="time" class="form-control input-sm " required />
    </div>
</body>

最佳答案

这里我给出一个简单的解决方案。如果两个值都小于当前值,它将提醒用户。

$(document).ready(function(){
            $("#time").on("focusout",function(e){
                var currentTime = new Date();
                var userTime = $("#time").val().split(":"); 
                if(currentTime.getHours() > parseInt(userTime[0])){
                    alert("To old value");
                    $(this).focus();                
                }
                if(currentTime.getHours() <= parseInt(userTime[0])){
                    if(currentTime.getMinutes() > parseInt(userTime[1])){
                        alert("To old value");
                    $(this).focus();
                    }
                }
            });
        });

关于jquery - 如何只接受输入类型 ='time' 中的 future 或当前时间?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45010092/

相关文章:

javascript - 将非专业介绍给HTML/编程的最佳方法是什么?

javascript - 嵌套类的 Json 对象

javascript - 如何查找祖先元素并查询其元数据

javascript - 如何使用一个按钮 Javascript 在两个图像之间切换

html - 为什么 padding 会改变设置了 border-box 的子 div 的高度?

html - CSS: Div的位置

JQuery on Change 事件处理程序在 CoffeeScript 中不起作用

javascript - jquery onclick if ...else if ...else 无法正常工作

javascript - PHP/MySQL和JQuery如何交互?

javascript - 我如何在javascript中使用另一个函数的变量