javascript 如何验证日期选择器中的日期时间？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9838720/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to validate the date time in datepicker?
提问by saran
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".
我在一个表单中有两个日期时间选择器来输入开始时间和结束时间。
开始时间的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;
}
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
我尝试比较开始时间和结束时间并验证开始时间不应大于结束时间。
现在，我想写一个验证，这样结束时间应该至少比开始时间大 1 小时。示例链接
：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()) );
}
});
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.
我试过这个，开始时间和结束时间是一样的。但我不确定如何将结束时间增加 1 小时。
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?
例如，如果开始时间值为 03-23-2012 10:00 AM，我希望结束时间为 03-23-2012 11:00 AM 任何人都可以帮助我吗？
Thanks
谢谢
采纳答案by Tats_innit
Alrighty here it is 1st one is the version you want and rest all you can use to debug.
好的，这是第一个是您想要的版本，剩下的就是您可以用来调试的所有版本。
**Final Solution adds + 1 ** http://jsfiddle.net/j82JJ/31/
**最终解决方案添加 + 1 ** http://jsfiddle.net/j82JJ/31/
simple date validation demohttp://jsfiddle.net/j82JJ/5/
简单的日期验证演示http://jsfiddle.net/j82JJ/5/
Time Validationhttp://jsfiddle.net/j82JJ/18/
时间验证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.
步骤 - 我已经注释掉了一行，所以现在您可以选择开始日期，然后在第二个文本框中选择结束日期，但比开始日期小，并且会出现警报。
'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.
'另请注意：'如果您取消注释我在 jsfiddle datetimepicker 中注释掉的行将永远不会允许您在此设置中选择小于开始日期的日期。
HTML
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 Code Detailshttp://trentrichardson.com/examples/timepicker/(All 3 js fiddle have Jquery code in it) 1st one should be reveland to you:
Jquery 代码详细信息http://trentrichardson.com/examples/timepicker/（所有 3 个 js 小提琴都包含 Jquery 代码）第一个应该让你陶醉：
All you need is that 'OnSelect' event of start date you want to do this:
您所需要的只是您想要执行此操作的开始日期的“OnSelect”事件：
onSelect: function (selectedDateTime){
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 );
}
Phew and this might help you as wellFound way after understanding this new datetimepicker : Jquery datetimepicker - Advance time by 1 hour
呼，这也可能对您有所帮助在理解这个新的日期时间选择器后找到了方法：Jquery datetimepicker - 提前 1 小时
** (I name few vars in jsfiddle as your name srry)
**（我在 jsfiddle 中命名了几个变量作为你的名字）
this will help, if you want I can cut down some code but you can do that as well, good link though, cheers!
这会有所帮助，如果您愿意，我可以减少一些代码，但您也可以这样做，但是链接很好，干杯！
