如何验证datepicker中的日期时间？

Question

我在表单中有两个datetimepicker，用于输入开始时间和结束时间。
开始时间的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小时。
sampleLink： DateTimePicker示例

$('#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小提琴都包含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 );


}

ew，这可能也对您有所帮助了解这种新的datetimepicker之后找到的方法： jQuery datetimepicker-将时间提前1小时

**（我在jsfiddle中命名几个变量作为您的名字）

如果您希望我可以减少一些代码，但您也可以这样做，那么很好的链接会很高兴！