Start End Date Validation

by gunjan_prmr

HTML

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<br/> Start Date:
<input type="text" id="StartDate" />
<br/> End Date:
<input type="text" id="EndDate" />

JavaScript

$(document).ready(function() {

  $("#StartDate").datepicker({
    showOn: "button",
    buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif",
    buttonImageOnly: true,
    minDate: 0,
    onSelect: function(selected) {
      $("#EndDate").datepicker("option", "minDate", selected)
    }
  });

  $("#EndDate").datepicker({
    showOn: "button",
    buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif",
    buttonImageOnly: true,
    minDate: 0,
    onSelect: function(selected) {
      $("#StartDate").datepicker("option", "maxDate", selected)
    }
  });

});