admin管理员组

文章数量:1287820

I'm trying to make a validation between 2 dates, startDate and endDate, 2 inputs using jquery, my code from 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">

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.

I'm trying to make a validation between 2 dates, startDate and endDate, 2 inputs using jquery, my code from 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">

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.

  • javascript
  • jquery
  • jquery-ui
Share Improve this question edited Jun 16, 2015 at 17:29 Shubh 6,7319 gold badges53 silver badges85 bronze badges asked Jun 16, 2015 at 17:02 VictorVictor 531 gold badge1 silver badge3 bronze badges 2
  • 4 Could you place your code into jsfiddle for us? – Richard Kho Commented Jun 16, 2015 at 17:03
  • 1 your end datepicker is not properly closed. it is missing a '}' at the end. $('#end').datepicker({ onSelect: function(selected) { $("#start").datepicker("option", "minDate", selected) } }); – Sushil Commented Jun 16, 2015 at 17:04
Add a ment  | 

2 Answers 2

Reset to default 5

The selected text string being passed to the onSelect function isn't in the proper format for 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).

Also, I believe that you probably want to be setting the maxDate option for the start date when the end date is selected (in your example, you are setting minDate in both instances)

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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis./ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis./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>

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./ajax/libs/jquery/1.6/jquery.min.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis./ajax/libs/jqueryui/1.8/jquery-ui.min.js"
    type="text/javascript"></script>
    <link href="http://ajax.googleapis./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>

本文标签： javascriptstartDate and endDate validationStack Overflow

版权声明：本文标题：javascript - startDate and endDate validation - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741276883a2369780.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。