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" />

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() {

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));

	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;
			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;
		        $('#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).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.

Key Factors to Keep in Mind When Developing a Web Application

The growing technology is helping businesses to understand the importance of web application development, as it not only enhances their business gr...

How Long Does it Take to Build a Website?

To create recognition and identity of your product or service in the market there is a need for online presence. For online presence, you must star...

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

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.