4

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.

2
  • 4
    Could you place your code into jsfiddle for us? 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
    Jun 16, 2015 at 17:04

2 Answers 2

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

1
  • Thank you, worked like a charm, also gonna check the documentation, gotta study lot more!
    – Victor
    Jun 17, 2015 at 19:32
1

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.