jQuery Datepicker Date Ranges

Using jQuery's Datepicker. Restrict start and end date date ranges based on which option is selected in a dropdown control. Reset the date ranges when a different selection is made.

by Chintan Upadhayay

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css">
<script src="http://momentjs.com/downloads/moment.js"></script>
<label for="from">From</label>
<input type="text" id="from" name="from">
<label for="to">to</label>
<input type="text" id="to" name="to">

JavaScript

var dateFormat = "mm/dd/yy",
  from = $("#from")
  .datepicker({
    // defaultDate: "+1w",
    // changeMonth: true,
    //  numberOfMonths: 1
    maxDate: new Date()
  })
  .on("change", function() {
    to.datepicker("option", "minDate", getDate(this));
    to.datepicker("option", "maxDate", getDate1(this));
  }),
  to = $("#to").datepicker({
    // defaultDate: "+1w",
    // changeMonth: true,
    //  numberOfMonths: 1
    maxDate: new Date()
  })
  .on("change", function() {
    from.datepicker("option", "maxDate", getDate(this));
  });

function getDate(element) {
  var date;
  try {
    date = $.datepicker.parseDate(dateFormat, element.value);
  } catch (error) {
    date = null;
  }

  return date;
}

function getDate1(element) {
  var date;
  try {
    date = $.datepicker.parseDate(dateFormat, element.value);
    console.log(date);
    var date1 = moment(date).add(13, 'd').format("MM/DD/YYYY");
    if (moment(date1).isSameOrBefore(new Date())) {
      console.log('asd');
      date = date1;
    } else {
      date = new Date();
      console.log('asd1');
      //date = $('#to').val();
    }
    console.log(date);

  } catch (error) {
    date = null;
  }

  return date;
}