DateRangePicker

Extension of the JQuery DatePicker to support ranges

by dacrazycoder

HTML

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<table>
    <tr>
        <td>
            <input id="fromDate" />
        </td>
        <td>
            <input id="toDate"/>
        </td>
    </tr>
</table>

CSS

body { font-size: .75em;}

.ui-daterange-glow {
    border: 2px solid rgba(100,100,100, .5); 
    background-color: rgba(200,200,200, .75);
    border-radius: .25em;
}

.ui-daterange-selected {
    background-color: rgba(100,100,100,.5); 
}

.ui-daterange-selected a {
    background-color: rgba(100,100,100,.5) !important;  
    color: white !important;
}


.ui-daterange-calendar {}

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
	border: 1px solid transparent;
    background-image: none;
	font-weight: normal;
	color: #555555;
}

JavaScript

$.datepicker._defaults.isDateSelector = false; 
$.datepicker._defaults.onAfterUpdate = null;
$.datepicker._defaults.base_update = $.datepicker._updateDatepicker;
$.datepicker._defaults.base_generate = $.datepicker._generateHTML;

function DateRange(options) {
    if (!options.startField) throw "Missing Required Start Field!";
  	if (!options.endField) throw "Missing Required End Field!";
    
    var isDateSelector = true;
      
    var cur = -1,prv = -1, cnt = 0;   
    var df = options.dateFormat ? options.dateFormat:'mm/dd/yy';
    var RangeType = {ID:'rangetype',BOTH:0,START:1,END:2};
    var sData = {input:$(options.startField),div:$(document.createElement("DIV"))};
    var eData = {input:null,div:null};
     
    /*
     * Overloading JQuery DatePicker to add functionality - This should use WidgetFactory!
     */
     $.datepicker._updateDatepicker = function (inst) {
          var base = this._get(inst, 'base_update'); 
          base.call(this, inst);  
          if (isDateSelector) {
              var onAfterUpdate = this._get(inst, 'onAfterUpdate'); 
            if (onAfterUpdate) onAfterUpdate.apply((inst.input ? inst.input[0] : null), [(inst.input ?                  inst.input.val() : ''), inst]);
      }
    }; 

    $.datepicker._generateHTML = function (inst) {      
      var base = this._get(inst, 'base_generate');     
      var thishtml = base.call(this, inst);     
      var ds = this._get(inst, 'isDateSelector'); 
      if (isDateSelector) {
        thishtml = $('<div />').append(thishtml);                    
        thishtml = thishtml.children();
      }   
      return thishtml;
    };  
    
    function _hideSDataCalendar() {
    	sData.div.hide();
    }
    
    function _hideEDataCalendar() {  		
    	eData.div.hide();
    }
    
   
    function _handleOnSelect(dateText, inst, type) { 
    	var localeDateText = $.datepicker.formatDate(df, new Date(inst.selectedYear, inst.selectedMonth, inst.selectedDay));
        
    	// 0 = sData,...