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

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

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

此外，我相信您可能想要在选择结束日期时为开始日期设置maxDate选项（在您的示例中，您在两个实例中都设置了minDate

<强>段：

＆＃13;

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

＆＃13;

div{
    padding: 15px;
    border: solid 2px steelblue;
}

＆＃13;

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

＆＃13;

Answer 2

试试这个： 此用户无法在开始日期之前选择日期

<!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>
          &nbsp;
      </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>

startDate和endDate验证

2 个答案: