Pure JQuery UI date range picker

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.

Ishank Gupta

Related articles

Our two bytes give the latest technology trends and information that gives you fair information about the subject.

5 Ways a Rails Consultant Can Save Your Time and Money

5 Ways a Rails Consultant Can Save Your Time and Money

If you’ve ever felt your web development project dragging on—costs mounting, deadlines slipping, and performance issues piling up—you’re not alone....
10 Proven Strategies to Build a High-Performance Ruby on Rails Development Team

10 Proven Strategies to Build a High-Performance Ruby on Rails Development Team

For almost twenty years, Ruby on Rails has served as the backbone for web applications, supporting everything from innovative startups to large-sca...
Key Responsibilities of Ruby on Rails Programmers in Web Projects

Key Responsibilities of Ruby on Rails Programmers in Web Projects

Why Ruby on Rails Consulting Matters In today’s fast-paced digital world, a product’s success largely depends on how quickly it reaches the market...

Cookie Preferences

We use cookies to deliver the best possible experience on our website. To learn more, visit our Privacy Policy. Please accept the cookies for optimal performance.Cookie Notice.