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.

Top 10 Most Popular CMS Platforms for Website Development

There is no doubt about it: technology keeps changing, and it has the ability to make things easier for humans. Website development is the need of ...

How to Develop a React Micro Front-End App? A Complete Guide

It is no secret that disassembling the issue is the best way to address any software issue. There are several ways to achieve this, including by r...

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

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