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.

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css">
<div>
  <label>Select an Option:</label>
  <select id="select1">
        <option value="" disabled="disabled" selected="selected">Select an option</option>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
    </select>
</div>
<br /><br />
<div>
  <label>Start Date:</label>
  <input type="text" id="startdatepicker" class="datepicker" disabled="disabled" />
  <br /><br />
  <label>End Date:</label>
  <input type="text" id="enddatepicker" class="datepicker" disabled="disabled" />
</div>

CSS

label {
  padding-right: 10px;
  background: red;
}

JavaScript

$('#select1').change(function() {
  $('#startdatepicker, #enddatepicker').removeAttr('disabled');
  $('#startdatepicker, #enddatepicker').val('');
});

$(function() {
  $('#startdatepicker, #enddatepicker').datepicker({
    beforeShow: customRange,
    dateFormat: "mm/dd/yy",
    firstDay: 1,
    changeFirstDay: false
  });
});

function customRange(input) {
  console.log(1)
  var min = null, // Set this to your absolute minimum date
    dateMin = min,
    dateMax = null,
    dayRange = 30; // Restrict the number of days for the date range

  if ($('#select1').val() === '2') {
    if (input.id === "startdatepicker") {
      if ($("#enddatepicker").datepicker("getDate") != null) {
        dateMax = $("#enddatepicker").datepicker("getDate");
        alert(1)
        dateMin = $("#enddatepicker").datepicker("getDate");
        dateMin.setDate(dateMin.getDate() - dayRange);
        if (dateMin < min) {
          dateMin = min;
        }
      } else {}
    } else if (input.id === "enddatepicker") {
      dateMin = $("#startdatepicker").datepicker('getDate');
      dateMax = new Date(dateMin.getFullYear(), dateMin.getMonth(), dateMin.getDate() + 30);
      if ($('#startdatepicker').datepicker('getDate') != null) {
        var rangeMax = new Date(dateMin.getFullYear(), dateMin.getMonth(), dateMin.getDate() + dayRange);
        if (rangeMax < dateMax) {
          dateMax = rangeMax;
        }
      }
    }
  } else if ($('#select1').val() != '2') {
    if (input.id === "startdatepicker") {
      if ($('#enddatepicker').datepicker('getDate') != null) {
        dateMin = null;
      } else {}
    } else if (input.id === "enddatepicker") {
      dateMin = $('#startdatepicker').datepicker('getDate');
      dateMax = null;
      if ($('#startdatepicker').datepicker('getDate') != null) {
        dateMax = null;
      }
    }
  }
  return {
    minDate: dateMin,
    maxDate: dateMax
  };
}

$('.datepicker').datepicker('widget').delegate('.ui-datepicker-close', 'mouseup',...