Sunday 26 October 2014

jQuery Datepicker with 2 inputs and range restriction

Example here: Datepicker

Example of using jQuery Datepicker with 2 inputs and range restriction

   

Code here:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script>
<script src=""></script>
<title>Datepicker</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />

<style type="text/css" media="screen">
body { background-color: #FFF; font: 16px Helvetica, Arial; color: #000; }
label { margin: 5px 5px 0 10px; }
</style>


</head>
<body>
  <h2>Example of using jQuery Datepicker with 2 inputs and range restriction</h2>

  <label>Start Date:</label><input type="text" value="10/06/2014" id="txtStartDate"></input>
  &nbsp;&nbsp;&nbsp;
  <label>End Date:</label><input type="text" id="txtEndDate"></input>
<script>
jQuery(function() {
  jQuery('#txtStartDate, #txtEndDate').datepicker();

  jQuery('#txtStartDate, #txtEndDate').datepicker('option', {
    beforeShow: customRange
  });
});

function customRange(input) {

  if (input.id == 'txtEndDate') {
    return {

      minDate: jQuery('#txtStartDate').datepicker("getDate")
    };
  } else if (input.id == 'txtStartDate') {
    return {
      maxDate: jQuery('#txtEndDate').datepicker("getDate")
    };
  }
}
</script>


</body>
</html>