Pure JQuery UI date range picker

Jquery ui date 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.

Web app development

Top 5 Reasons to Choose Web App Development

The creation of web applications has advanced greatly from the creation of static web pages and now includes interactive capabilities that mimic th...
Why sailsjs can be the best nodejs framework for your next app 1

Why Can Sailsjs Be The Best Nodejs Framework For Your Next App?

Sails.js is a web framework for creating custom, enterprise-grade Node.js development services. It's designed to look like Ruby on Rails' MVC archi...
Solograph vs vscode

Solograph vs VS code Setup for Ruby on Rails

In this blog, You'll learn how to set up Visual Studio Code to work with Ruby and Ruby On Rails development solutions. VS Code is the preferred edi...

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.

Accept Reject