JQuery UI date range picker

DateRangePicker.js

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;

index.html

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

style.css

.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;
}