Pure JQuery UI date range picker

Date range selector example given in the official documentation of JQuery UI datepicker is not that handy, so I have modified it a bit and have designed the same which is more intuitive. You can have a look at this demo HTML of the range picker is simple, I have created two text field separated by a hyphen.

<div align="center">
<div class="date-range"><input id="start_date" class="datepicker" name="start_date" readonly="readonly" type="text" data-should_refresh="end_date" data-type="minDate" />
<div class="saperator">-</div>
<input id="end_date" class="datepicker" name="end_date" readonly="readonly" type="text" data-should_refresh="start_date" data-type="maxDate" />
</div>
</div>

Add CSS to make it look better

.datepicker {
	width: 80px;
	border: 0;
}
.date-range {
	padding: 0 0 0 5px;
	display: inline-block;
	border: 1px solid silver;
}
.date-range div {
	display: inline-block;
}
.highlightRange a {
	background: #7D93A8 !important;
	color: white !important;
}

Now, finally the JS. There are 3 main functions in the JS class below:

1. setDatePickerDefaults : Which is used to set defaults of the datepicker. I am overriding few callbacks - beforeShow to change the datepicker position; beforeShowDay which is highlighting the date range selected by calling highlightDays method; onSelect which is refreshing the datepicker to set the maxDate and minDate; onClose which is used to focus the selected date filed.
2. bindRangeDatePickers : This method is simply binding the JQuery UI datepicker with the start and end date field.
3. highlightDays : This method is adding highlightRange class to the dates in datepicker which are between start_date and end_date.

var DateRangePicker =  function() {
	this.init();
}

DateRangePicker.prototype = {
	init: function() {
		var today = new Date();
		this.end_date = new Date(today.setDate(today.getDate() - 1));
		this.start_date = new Date(today.setDate(today.getDate() - 7));
		this.setDatePickerDefaults();
		this.bindRangeDatePickers();
	},

	highlightDays: function(date) {
		if($(this).attr("name").match(/current/)) {
			if((date <= myDateRangePicker.end_date) && (date >= myDateRangePicker.start_date)) {
				return [true, "highlightRange"];
			} 
		} else {
			if((date <= myDateRangePicker.end_date) && (date >= myDateRangePicker.start_date)) {
				return [true, "highlightRange"];
			} 
		}
		return [true, ''];
	},

	setDatePickerDefaults: function() {
		var that = this;
		$.datepicker.setDefaults({
			dateFormat: "M d, yy",
			numberOfMonths: 2,
	    showButtonPanel: true,
      beforeShowDay: that.highlightDays,
      beforeShow: function(input, inst) {
				$(this).css("background", "#D5E3ED");
				if($(this).attr("name").match(/end/)) {
					var originalLeft = $(inst.input).position().left;
					setTimeout(function(){
		        $('#ui-datepicker-div').css({'left': originalLeft - 94 + 'px'});      
				  }, 1);
				}
			},
      onSelect: function(dateText) {
				var datePickerOptions = {};
				var selectedDate = $.datepicker.parseDate("M d, yy", dateText);
				datePickerOptions[$(this).data("type")] = selectedDate;
				$("#" + $(this).data("should_refresh")).datepicker("destroy");
				$("#" + $(this).data("should_refresh")).datepicker(datePickerOptions);
				$("#" + $(this).data("should_refresh")).datepicker("refresh");
				eval("that."+$(this).attr("id") + " = selectedDate");
			},
			onClose: function(dateText) {
				var $this = $(this)
				if($this.data("type") == "minDate") {
					$("#"+$this.data("should_refresh")).trigger("focus");
				}
				$(this).css("background", "#fffff");
			}
		});
	},

	bindRangeDatePickers: function() {
		var that = this;
		$("#start_date").datepicker({maxDate: that.end_date_current}).val($.datepicker.formatDate("M d, yy", that.start_date));
		$("#end_date").datepicker({minDate: that.start_date_current}).val($.datepicker.formatDate("M d, yy", that.end_date));
	}
}

var myDateRangePicker;

Hope this will solve your purpose.