timepicker与当前日期验证

Posted 2021-05-05

我想要一个时间字段添加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;
}

答案

您的代码存在许多问题。

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());

如果您希望在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的值解析为local，或者为本地日期构建ISO 8601格式的日期字符串并进行比较。

但是为什么不使用tm和pd中的值创建一个Date，然后将它与现在进行比较，看看时差是否超过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>

另一答案

您可以使用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;
    }   
}

以上是关于timepicker与当前日期验证的主要内容，如果未能解决你的问题，请参考以下文章

Android自学日记使用DatePicker以及TimePicker显示当前日期和时间

jQuery Timepicker“现在”按钮不访问当前时间

android datepickerdialog怎样设置时间最小值？？

在 Laravel 请求中验证 Bootstrap 日期时间选择器

Android攻城狮datePicke&timePicker

如何使用javascript在jsp页面的Datepicker中添加Timepicker