Date Range Picker

by Alex Azuero

HTML

<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<form class="mainContent">
    <label >DatePicker</label>
    <input type="text" class="datepicker" id="ctl00_Main_EditcreeningControl1_txtDate"/><br/>
    <span id="placeholder" ></span>
    <br/><br/><br/><br/>
    
    
    <label >Textbox</label>
    <input type="text" /><br/>
    
    <label >Textbox</label>
    <input type="text" /><br/>   
    
    <label >Checkbox</label>
    <input type="checkbox" /><br/>  
    
    <label >Radio</label>
    <input type="radio" /><br/>  
    
    <label >Dropdown</label>
    <select >
        <option value="0"></option>
        <option value="1">One Banana</option>
        <option value="2">Two Apples</option>
    </select>
    
    <input type="submit"/>
    
</form>

CSS

.ui-widget {
    font-size: 66%;
}
label {
    width: 100px;
    display: inline-block;
}

JavaScript

var datePickerId = "ctl00_Main_EditcreeningControl1_txtDate";
var patientDOB = '10/10/14';
var startMonths = 1;
var endMonths = 65;

$("#" + datePickerId).datepicker({
    onSelect: function() {
        $(this).change();
    }
}).change(function() {
    var selectedDate = $(this).datepicker("getDate");
    
    var dob = new Date(patientDOB)
    
    var startDate = new Date(patientDOB)
    startDate.setMonth(startDate.getMonth() + startMonths);
    
    var endDate = new Date(patientDOB)
    endDate.setMonth(endDate.getMonth() + endMonths);
    
    var dateInRange = startDate < selectedDate &&
                      selectedDate < endDate
    
    $(this).closest(".mainContent")   // get parent container
           .find(":input")            // find all input controls
           .not(this)                 // exclude datepicker itself
           .prop("disabled", !dateInRange);
    
    
    var message = dateInRange ? "" :
      "Date must be between " + getFormattedDate(startDate) + 
                  " and " + getFormattedDate(endDate)
    $("#placeholder").html(message)
});


function getFormattedDate(date) {
  var year = date.getFullYear();
  var month = (1 + date.getMonth()).toString();
  month = month.length > 1 ? month : '0' + month;
  var day = date.getDate().toString();
  day = day.length > 1 ? day : '0' + day;
  return year + '/' + month + '/' + day;
}