具有当前日期验证的时间选择器

Question

我想将 javascript 添加到时间字段中，这样它就不会占用当前日期的当前时间或以前的时间。它也不应该比当前日期的当前时间多 4 小时...例如: 如果日期是 2018-03-03，时间是 13:00:00，那么当前日期的时间不应小于 17:00:00 .. 时间格式为 hh:mm:ss。我正在以 yyyy-mm-dd 格式在另一个字段中记录日期。 这是我尝试过的代码。请告诉我可以更改的内容。

function currtime()
var tm = document.getElementById("ptime");
var pd = document.getElementById("pdate");

var now =new date();
var select = new Date(now.getFullYear(),now.getMonth(),now.getDate());
var specific = new Date(pd);

if  ((specific == select) && (tm <= now)){
alert("incorrect time for today");
return false;
}

else {
return true;
}

Answer 1

您可以使用spread syntax 在一行中创建指定日期，然后您可以使用关系运算符比较日期：

function currtime() {
    var tm = document.getElementById("ptime").value.split('-');
    var pd = document.getElementById("pdate").value;

    var specified = new Date(tm[0], tm[1] - 1, tm[2], ...tm.split(':'));
    var select = new Date();

    if (specified < select || specified > select.setHours(select.getHours() + 4)){
        alert("incorrect time for today");
        return false;
    } else {
        return true;
    }   
}

Answer 2

您的代码存在许多问题。

function currtime()
  var tm = document.getElementById("ptime");
  var pd = document.getElementById("pdate");

tm 和 pd 的值是 HTML 元素（或 null）。猜测它们是 HTML 时间和日期输入，您想获取它们的值：

  var tm = document.getElementById("ptime").value;
  var pd = document.getElementById("pdate").value;

然后有：

var now =new date();
var select = new Date(now.getFullYear(),now.getMonth(),now.getDate());

如果您希望 select 成为当前日期 00:00:00 的日期，那么获取日期并将时间部分归零会更简单：

var select = new Date();
select.setHours(0,0,0,0);

无论如何，您不需要这样做。然后是：

var specific = new Date(pd);

假设 pd 是 ISO 8601 格式的日期，如 2018-03-04，那么它将被解析为 UTC，因此时间将与主机系统偏移一样偏移。您可能希望将其解析为本地。因此，您可以编写一个简单的函数来将 pd 的值解析为本地日期，或者为本地日期构建一个 ISO 8601 格式的日期字符串并进行比较。

但是为什么不使用 tm 和 pd 中的值来创建一个日期，然后将它与现在比较，看看时差是否超过 4 小时（或14.4e6ms）？如果您希望它在 4 小时内和在同一日期，则需要更多的逻辑。

function within4Hours() {
  // Get date and time values as array of parts
  var d = document.getElementById('pdate').value.split('-');
  var t = document.getElementById('ptime').value.split(':');
  // Create date from parts
  var date = new Date(d[0], d[1]-1, d[2], t[0], t[1]);

  // Return true if difference is < 4hrs, otherewise false 
  return Math.abs(date - Date.now()) <= 1.44e7;
}

Date: <input type="date" id="pdate" value="2018-03-04"><br>
Time: <input type="time" id="ptime" value="10:23"><br>
<button onclick="console.log(within4Hours())">Within 4 hours of now?</button>

请注意，这会检查提供的时间是否为现在任一侧的 4 小时。如果你以后只想要它，在return语句中调整测试。