title: how to make the Jquery datepicker validations to work on for default values
body: <p>I have a requirement to validate a start date and end date as shown below:
  the problem is that the start date and end dates are having default date at the html itself as shown below:</p>
  
  <pre><code>Start Date: &lt;input type="text" id="startDate" value="2017-03-13"/&gt;
  End Date: &lt;input type="text" id="endDate" value="2017-03-13"/&gt;
  </code></pre>
  
  <p>when i add datepicker and some validations for that start date and end date, the validations are not working on the default values that was given in the html code, how can i make start date and end date validations to work for the dates given in the html values also.</p>
  
  <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() {
  
    $("#startDate").datepicker({
      dateFormat: 'yy-mm-dd',
      changeMonth: true,
      changeYear: true
    }).bind("change", function() {
      var minValue = $(this).val();
  
      minValue = $.datepicker.parseDate("yy-mm-dd", minValue);
      minValue.setDate(minValue.getDate() + 1);
      $("#endDate").datepicker("option", "minDate", minValue);
  
    });
  
    $("#endDate").datepicker({
      dateFormat: 'yy-mm-dd',
      changeMonth: true,
      changeYear: true
  
    }).bind("change", function() {
  
      var maxValue = $(this).val();
      maxValue = $.datepicker.parseDate("yy-mm-dd", maxValue);
      maxValue.setDate(maxValue.getDate() - 1);
      $("#startDate").datepicker("option", "maxDate", maxValue);
  
    });
  
    $(".ui-datepicker").css({
      "font-size": "12px"
    });
  
    $("#startDate").keydown(function(e) {
      e.preventDefault();
    });
  
    function validateQty(event) {
      var key = window.event ? event.keyCode : event.which;
      if (event.keyCode == 8 || event.keyCode == 46 ||
        event.keyCode == 37 || event.keyCode == 39) {
        return true;
      } else if (key &lt; 48 || key &gt; 57) {
        return false;
      } else return true;
    };
  
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  &lt;head&gt;
  
  
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"&gt;&lt;/script&gt;
  &lt;link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet"/&gt;
  
  
  &lt;/head&gt;
  &lt;body&gt;
  Start Date: &lt;input type="text" id="startDate" value="2017-03-13"/&gt;
  End Date: &lt;input type="text" id="endDate" value="2017-03-23" onkeypress='return validateQty(event);'/&gt;
  &lt;input type="submit"/&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I have added the jsfiddle code as below:[enter link description here][1]</p>
  
  <p><a href="https://jsfiddle.net/Manishankarg/ncgg8t9x/1/" rel="nofollow noreferrer">https://jsfiddle.net/Manishankarg/ncgg8t9x/1/</a></p>