javascript startDate 和 endDate 验证
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30873818/
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
startDate and endDate validation
提问by Victor
I'm trying to make a validation between 2 dates, startDate and endDate, 2 inputs using jquery, my code from js
我正在尝试在 2 个日期、startDate 和 endDate、2 个输入之间进行验证，使用 jquery，我的代码来自 js
$('#start').datepicker({
onSelect: function(selected) {
$("#end").datepicker("option", "minDate", selected)
}
});
$('#end').datepicker({
onSelect: function(selected) {
$("#start").datepicker("option", "minDate", selected)
});
HTML
HTML
<input type="text" class="form-control form-fixer noEmpty" value="" id="start">
<input type="text" class="form-control form-fixer noEmpty" value="" id="end">
when i try to debug it doesn't even enter into onSelect, don't know what am i doing wrong, thank you in advance for the help.
当我尝试调试它甚至没有进入时onSelect，不知道我做错了什么，提前感谢您的帮助。
回答by wahwahwah
The selectedtext string being passed to the onSelectfunction isn't in the proper format for jQuery UI datepicker minDate.
selected传递给onSelect函数的文本字符串不是 jQuery UI datepicker 的正确格式minDate。
You can use the text to create a new Date()object from this string that will be supported type for minDate(here is the documentation).
您可以使用文本Date()从该字符串创建一个新对象，该对象将支持的类型minDate（这里是文档）。
Also, I believe that you probablywant to be setting the maxDateoption for the start datewhen the end date is selected (in your example, you are setting minDatein both instances)
此外，我相信您可能希望在maxDate选择结束日期时设置开始日期选项（在您的示例中，您minDate在两种情况下都进行了设置）
Snippet:
片段：
$('#start').datepicker({
onSelect: function(dateText, inst){
$('#end').datepicker('option', 'minDate', new Date(dateText));
},
});
$('#end').datepicker({
onSelect: function(dateText, inst){
$('#start').datepicker('option', 'maxDate', new Date(dateText));
}
});div{
padding: 15px;
border: solid 2px steelblue;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div>Start: <input type="text" id="start" /></div>
<div>End: <input type="text" id="end" /></div>回答by Ritesh Karwa
Try this:With this user wont be able to pick a date before the start date
试试这个：有了这个用户将无法在开始日期之前选择一个日期
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"
type="text/javascript"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css"
rel="Stylesheet"type="text/css"/>
<style>
.mySelect {
width: 300px;
}
</style>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
From:
</td>
<td>
<input type="text" id="txtFrom" />
</td>
<td>
</td>
<td>
To:
</td>
<td>
<input type="text" id="txtTo" />
</td>
</tr>
</table>
<script>
$(function () {
$("#txtFrom").datepicker({
numberOfMonths: 2,
onSelect: function (selected) {
var dt = new Date(selected);
dt.setDate(dt.getDate() + 1);
$("#txtTo").datepicker("option", "minDate", dt);
}
});
$("#txtTo").datepicker({
numberOfMonths: 2,
onSelect: function (selected) {
var dt = new Date(selected);
dt.setDate(dt.getDate() - 1);
$("#txtFrom").datepicker("option", "maxDate", dt);
}
});
});
</script>
</script>
</body>
</html>
