如何在datepicker中验证日期时间？ [英] How to validate the date time in datepicker?

问题描述

我在表单中有两个datetimepickers来输入开始时间和结束时间。

开始时间的ID是startTime，结束时间的ID是endTime。

I have two datetimepickers in a form to enter the start time and end time.
The ID of the start time is "startTime" and that of end time is "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示例

I tried to compare the start time and end time and validated that the start time should not be greater than the end time.
Now, I want to write a validation, so that the end time should aleast be greater than the start time by 1 hour.
sampleLink: 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小时。

I tried with this and got the start time and end time to be the same. But I'm not sure how to increase the end time by 1 hour.

例如，如果启动时间值是03-23-2012 10:00 AM我希望结束时间为03-23-2012 11:00 AM
有人可以帮我吗？

For example, if the starttime value is 03-23-2012 10:00 AM i want the endtime as 03-23-2012 11:00 AM Can any one help me on this please?

谢谢

推荐答案

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

Alrighty here it is 1st one is the version you want and rest all you can use to debug.

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

**Final Solution adds + 1 ** http://jsfiddle.net/j82JJ/31/

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

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

此外，如果您取消注释掉我已评论的代码以生成验证，那么您将永远不会遇到您需要的情况验证。 ：）

Also if you un-comment out the code I have commented to generate the validation then you will never come into a situation where you need validation. :)

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

Steps- I have commented out one line so now you can select start date and then on the second text box select end date but smaller then the start date and the alert will appear.

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

'Also note:' if you uncomment out the line I have commented out in jsfiddle datetimepicker will never allow you to select date lesser then start date on this setting.

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个小提琴都有Jquery代码）第一个应该是给你的启示：

Jquery Code Details http://trentrichardson.com/examples/timepicker/ (All 3 js fiddle have Jquery code in it) 1st one should be reveland to you:

所有你需要的是你想要做的开始日期的'OnSelect'事件：

All you need is that 'OnSelect' event of start date you want to do this:

onSelect：function（selectedDateTime）{

onSelect: function (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 );


}

Phew，这可能会有所帮助你也是了解这个新的datetimepicker后找到方法： Jquery datetimepicker - 提前1小时

Phew and this might help you as well Found way after understanding this new datetimepicker : Jquery datetimepicker - Advance time by 1 hour

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

** (I name few vars in jsfiddle as your name srry)

这会有所帮助，如果你想我可以减少一些代码，但你也可以这样做，但是好的链接，欢呼！

this will help, if you want I can cut down some code but you can do that as well, good link though, cheers!

这篇关于如何在datepicker中验证日期时间？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！