title: Jquery DatePicker Set min and max date
body: <p>I am trying to make a webpage which has a datepicker, but i can not figure out how i can set the min and max date dynamically.I am trying to achieve is <br></p>
  <ol>
  <li>not let the user select a date before today's date. <br></li>
  <li>Once a date is selected set the max selectable date to 1 week, so the user can only choose from 7 days the selected date. <br>
  So far I have done this, but it does not seem to update every time a user selects a new date. for example, if i select today's date (23) it does set the max date to 29, but if i change my selected date from 23 to 27, rather than it letting me choose from 27 to 3, it only allows me to select from 27 to 29. can someone please help me? thanks :)</li>
  </ol>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
             
    $(function() {
        $('#txtArrivalDate').datepicker({
            dateFormat: 'mm-dd-yy',
            minDate: "-0d",
            onSelect: function(date) {
                selectedDate = date;
                $('#txtDepartureDate').datepicker('option', 'minDate', date);
                $("#txtDepartureDate").datepicker("refresh");
                $('#txtDepartureDate').datepicker('option', 'firstDay', date);
                $('#txtDepartureDate').datepicker('option', 'maxDate', '+7d');
            }, //end of onSelect attribute
  
            onClose: function(date) {
            }, //end of onClose
  
        }); //end of txtArrivalDate datepicker
    }); //end of txtArrivalDate function
  
    $("#txtArrivalDate").change(function() {
  
        $('#txtDepartureDate').datepicker('option', 'firstDay', selectedDate);
        $('#txtDepartureDate').datepicker('option', 'maxDate', '+7d');
    });
  
    $(function() {
        $('#txtDepartureDate').datepicker({
            dateFormat: 'mm-dd-yy'
        });
    }) //end of txtDepartureDate function
  
  }); //end of Ready function</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://code.jquery.com/jquery-1.12.4.js"&gt;&lt;/script&gt;
    &lt;script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"&gt;&lt;/script&gt;
    &lt;link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"&gt;
  
  Arrival Date:-
    &lt;input type="text" id="txtArrivalDate" /&gt; &lt;br /&gt;&lt;br /&gt;
  Departure Date:-
    &lt;input type="text" id="txtDepartureDate" /&gt; &lt;br /&gt;&lt;br /&gt;</code></pre>
  </div>
  </div>
  </p>