javascript - 开始日期和结束日期验证

Question

我正在尝试在 2 个日期之间进行验证，startDate 和 endDate，使用 jquery 的 2 个输入，我的代码来自 js

$('#start').datepicker({
    onSelect: function(selected) {
        $("#end").datepicker("option", "minDate", selected)
    }
});

$('#end').datepicker({
    onSelect: function(selected) {
        $("#start").datepicker("option", "minDate", selected)
});

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">

当我尝试调试时，它甚至没有进入 onSelect，不知道我做错了什么，提前感谢您的帮助。

Answer 1

传递给 onSelect 函数的 selected 文本字符串不是 jQuery UI datepicker minDate 的正确格式。

您可以使用该文本从该字符串创建一个新的 Date() 对象，该对象将支持 minDate ( here is the documentation) 类型。

此外，我相信您可能希望在选择结束日期(在你的例子，你在两种情况下都设置了 minDate)

片段:

$('#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>