Question

我有一个input字段type="time"。如何使该字段仅接受当前或未来的时间？

如果用户输入的时间错误，则应显示一条消息，要求再次输入时间。这里的未来意味着最多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>

Answer 1

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

.innerHTML

Answer 2

您可以创建自定义AddDays()功能，以便在两天后获得，并根据所选日期值hide()或show()显示错误消息。你可以实现如下。

＆＃13;

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
    });
  });
});

// Your custom day addition function
function addDays (date, days) {
  const result = new Date(date)
  result.setDate(result.getDate() + days)
  return result
}

$("#date").on("change",function(e){
    var val = new Date($(this).val()); // selected value
    var current = new Date(); // current date
    var futuredate = addDays(current,2) // two days later

    if(val.getTime() <= futuredate.getTime())
    {
       $("#error").hide();
    }
    else
    {  
       $("#error").show();
       $(this).val(null); // makes input default
    }    
})

＆＃13;

<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 />
      <span id="error" style="display:none; color:red">Please select a date within two days</span>
    </div>
    <div>
      <p>Time <span>*</span></p>
      <input type="time" value="now" name="time" id="time" class="form-control input-sm " required />
    </div>
</body>

＆＃13;

如何在输入类型='时间'中仅接受未来或当前时间？

2 个答案: