如何验证日期选择器中的日期时间？

Question

我在表单中有两个日期时间选择器来输入开始时间和结束时间。
开始时间的ID是“startTime”，结束时间的ID是“endTime”。

var startTime = document.getElementById("startTime");
var endTime = document.getElementById("endTime");

if (new Date(startTime.value).getTime() > new Date(endTime.value).getTime()) {
     alert("End Time should be greater than Start Time");
     return false;
}

我尝试比较开始时间和结束时间，并验证开始时间不应大于结束时间。
现在，我想写一个验证，这样结束时间应该至少比开始时间大 1 小时。
示例链接：DateTimePicker Example

$('#startTime').datetimepicker({
    onClose: function(dateText, inst) {
        var endDateTextBox = $('#endTime');
        if (endDateTextBox.val() != '') {
            var testStartDate = new Date(dateText);
            var testEndDate = new Date(endDateTextBox.val());
            if (testStartDate > testEndDate)
                endDateTextBox.val(dateText);
        }
        else {
            endDateTextBox.val(dateText);
        }
    },
    onSelect: function (selectedDateTime){
        var start = $(this).datetimepicker('getDate');
        $('#endTime').datetimepicker('option', 'minDate', new Date(start.getTime()));
    }
});
$('#endTime').datetimepicker({
    onClose: function(dateText, inst) {
        var startDateTextBox = $('#startTime');
        if (startDateTextBox.val() != '') {
            var testStartDate = new Date(startDateTextBox.val());
            var testEndDate = new Date(dateText);
            if (testStartDate > testEndDate)
                startDateTextBox.val(dateText);
        }
        else {
            startDateTextBox.val(dateText);
        }
    },
    onSelect: function (selectedDateTime){
        var end = $(this).datetimepicker('getDate');
        $('#startTime').datetimepicker('option', 'maxDate', new Date(end.getTime()) );
    }
});

我试过这个，开始时间和结束时间是一样的。但我不确定如何将结束时间增加 1 小时。

例如，如果开始时间值为 03-23-2012 10:00 AM，我希望结束时间为 03-23-2012 11:00 AM 有人可以帮我解决这个问题吗？

谢谢

Answer 1

好吧，第一个是你想要的版本，剩下的就是你可以用来调试的。

**最终解决方案增加 + 1 ** http://jsfiddle.net/j82JJ/31/

简单的日期验证演示 http://jsfiddle.net/j82JJ/5/

时间验证 http://jsfiddle.net/j82JJ/18/

此外，如果您取消注释我为生成验证而注释的代码，那么您将永远不会遇到需要验证的情况。 :)

步骤- 我已经注释掉了一行，所以现在您可以选择开始日期，然后在第二个文本框中选择结束日期，但小于开始日期，并且会出现警报。

'另请注意：'如果您取消注释我在 jsfiddle datetimepicker 中注释掉的行，将永远不允许您选择小于此设置的日期然后开始日期。

HTML

<div style="margin: 15px;">
    <input id="example16_start" type="text" value="" name="test">
    <input id="example16_end" type="text" value="" name="test">
</div>
​

Jquery 代码详细信息 http://trentrichardson.com/examples/timepicker/（所有 3 个 js fiddle 中都有 Jquery 代码）第一个应该是你的狂欢：

您所需要的只是您想要执行此操作的开始日期的“OnSelect”事件：

onSelect: 函数 (selectedDateTime){

  var startDate = $('#example16_start').datetimepicker('getDate');
   var endDate = new Date(parseFloat(startDate.setHours(startDate.getHours()+1)));

   //Get the ending date datepart
   var endDateDatePart = endDate.getFullYear() + '/' + endDate.getMonth() + '/' + endDate.getDate();

   //calculate the ending date time part including AM/PM
   var endDateTimePart;
   if (endDate.getHours() > 12) { endDateTimePart = endDate.getHours()-12 + ':' + endDate.getMinutes() + ' PM';} else {endDateTimePart = endDate.getHours() + ':' + endDate.getMinutes() + ' AM';}
   $('#example16_end').datetimepicker('setDate', endDateDatePart + ' ' + endDateTimePart );


}

唷，这也可能对您有所帮助在了解了这个新的 datetimepicker 后找到了方法：Jquery datetimepicker - Advance time by 1 hour

**（我将 jsfiddle 中的几个 vars 命名为你的名字 srry）

这会有所帮助，如果你愿意，我可以减少一些代码，但你也可以这样做，不过链接很好，干杯！