jQuery Date Range Picker

jQuery Date Range Picker is a jQuery plugin that allows user to select a date range.

Requires jQuery 1.3.2+ (MIT LICENSE), Moment 2.8.1+ (MIT LICENSE)

Supports IE8+, Firefox, Chrome, Safari and other standard HTML5 browsers.

Supports multi-language, you can choose a defined language or set it to auto-detect mode.
You can also define new languages for it.

The HTML DOMs generated is fully CSS styled, you can change the skin by editting the CSS file easily.

I accept further customization job if you require more functions. My personal blog is http://jszen.com

Fork me on Github https://github.com/longbill/jquery-date-range-picker

Installation

Demonstrations

Default settings: Show Config
{}
Default settings with time enabled: Show Config
{
	startOfWeek: 'monday',
	separator : ' ~ ',
	format: 'DD.MM.YYYY HH:mm',
	autoClose: false,
	time: {
		enabled: true
	}
}
Default settings with default start/end time value: Show Config
{
	startOfWeek: 'monday',
	separator : ' ~ ',
	format: 'DD.MM.YYYY HH:mm',
	autoClose: false,
	time: {
		enabled: true
	},
	defaultTime: moment().startOf('day').toDate(),
	defaultEndTime: moment().endOf('day').toDate()
}
Default settings with default value: Show Config
{}
Force to Chinese: Show Config
{
	language:'cn'
}
Force to English: Show Config
{
	language:'en'
}				
Use custom language: Show Config
{
	language: 'custom'
}			
Select a date range after 2014-11-20: Show Config
{
	startDate: '2014-11-20'
}				
Limit date range selected between 3 days to 7 days: Show Config
{
	maxDays: 7,
	minDays: 3
}				
Select a date range between 2013-01-10 to 2013-02-10: Show Config
{
	startDate: '2013-01-10',
	endDate: '2013-02-10'
}				
Select a date range between 3 days and 7 days: Show Config
{
	minDays: 3,
	maxDays: 7
}			
Set start of week to Monday: Show Config
{
	startOfWeek: 'monday'
}			
Use SPAN instead of INPUT: select Show Config
{
	getValue: function()
	{
		return this.innerHTML;
	},
	setValue: function(s)
	{
		this.innerHTML = s;
	}
}				
Use two inputs: to Show Config
{
	separator : ' to ',
	getValue: function()
	{
		if ($('#date-range200').val() && $('#date-range201').val() )
			return $('#date-range200').val() + ' to ' + $('#date-range201').val();
		else
			return '';
	},
	setValue: function(s,s1,s2)
	{
		$('#date-range200').val(s1);
		$('#date-range201').val(s2);
	}
}				
Use another date format: Show Config
{
	format: 'dddd MMM Do, YYYY'  //more formats at http://momentjs.com/docs/#/displaying/format/
}				
Use future date shortcuts: Show Config
{
	showShortcuts: true,
	shortcuts :
	{
		'next-days': [3,5,7],
		'next': ['week','month','year']
	}
}				
Use past date shortcuts: Show Config
{
	showShortcuts: true,
	shortcuts :
	{
		'prev-days': [3,5,7],
		'prev': ['week','month','year'],
		'next-days':null,
		'next':null
	}
}				
Use custom shortcuts: Show Config
{
	showShortcuts: true,
	shortcuts : null,
	startOfWeek: 'sunday',
	language:'en',
	customShortcuts:
	[
		//if return an array of two dates, it will select the date range between the two dates
		{
			name: 'this week',
			dates : function()
			{
				var start = moment().day(0).toDate();
				var end = moment().day(6).toDate();
				return [start,end];
			}
		},
		//if only return an array of one date, it will display the month which containing the date. and it will not select any date range
		{
			name: 'Oct 2014',
			dates : function()
			{
				//move calendars to show this date's month and next month
				var movetodate = moment('2014-10','YYYY-MM').toDate();
				return [movetodate];
			}
		}
	]
}				
Use custom values: Show Config
{
	language:'en',
	customValueLabel: 'Dynamic Ranges',
	showCustomValues: true,
	customValues:
		//if return an array of two dates, it will select the date range between the two dates
		[
			{
				name: 'MTD',
				value: 'Month To Date'
			},
			{
				name: 'YTD',
				value: 'Year To Date'
			}
		]
}				
Auto-close after selection: Show Config
{
	autoClose: true
}				
In-line mode: Show Config
{
	inline:true,
	container: '#date-range12-container',
	alwaysOpen:true
}				
Single Date mode: Show Config
{
	autoClose: true,
	singleDate : true,
	showShortcuts: false
}				
Single Date mode with single month: Show Config
{
	autoClose: true,
	singleDate : true,
	showShortcuts: false,
	singleMonth: true
}				
Batch mode ( week ): Show Config
{
	batchMode: 'week',
	showShortcuts: false
}				
Batch mode ( week-range ): Show Config
{
	batchMode: 'week-range',
	showShortcuts: false
}				
Disable some dates: Show Config
{
	showShortcuts: false,
	beforeShowDay: function(t)
	{
		var valid = !(t.getDay() == 0 || t.getDay() == 6);  //disable saturday and sunday
		var _class = '';
		var _tooltip = valid ? '' : 'weekends are disabled';
		return [valid,_class,_tooltip];
	}
}				
Control by script:
Show Config
$('#date-range16').dateRangePicker(
{
	showShortcuts: false,
	format: 'YYYY-MM-DD'
}).bind('datepicker-change', function(evt, obj) {
	alert('date1: ' + obj.date1 + ' / date2: ' + obj.date2);
});

$('#date-range16-open').click(function(evt)
{
	evt.stopPropagation();
	$('#date-range16').data('dateRangePicker').open();
});

$('#date-range16-close').click(function(evt)
{
	evt.stopPropagation();
	$('#date-range16').data('dateRangePicker').close();
});

$('#date-range16-set').click(function(evt)
{
	evt.stopPropagation();
	$('#date-range16').data('dateRangePicker').setDateRange('2013-11-20','2014-08-25');
});

$('#date-range16-set-silent').click(function(evt)
{
	evt.stopPropagation();
	$('#date-range16').data('dateRangePicker').setDateRange('2014-11-03','2015-02-12', true);
});

$('#date-range16-clear').click(function(evt)
{
	evt.stopPropagation();
	$('#date-range16').data('dateRangePicker').clear();
});

$('#date-range16-destroy').click(function(evt)
{
	evt.stopPropagation();
	$('#date-range16').data('dateRangePicker');
});

$('#date-range16-reset').click(function(evt)
{
	evt.stopPropagation();
	$('#date-range16').data('dateRangePicker').resetMonthsView();
});
				
Sticky months: Show Config
{
	stickyMonths: true,
	startDate: '2013-01-10',
	endDate: '2013-05-10'
}				
Use custom top bar: Show Config
{
	customTopBar: 'Foo Bar'
}
Different class names of first and second selected dates: Show Config
{
	extraClass: 'date-range-picker19'
}
.date-picker-wrapper.date-range-picker19 .day.first-date-selected { background-color: red !important; }
.date-picker-wrapper.date-range-picker19 .day.last-date-selected { background-color: orange !important; }
Hide hovering tooltip: Show Config
{
	hoveringTooltip: false
}
Customize hovering tooltip: Show Config
{
	hoveringTooltip: function(days)
	{
		var D = ['One','Two', 'Three','Four','Five'];
		return D[days] ? D[days] : days;
	}
}
Extra content on calendar: Show Config
{
	showDateFilter: function(time, date)
	{
		return '<div style="padding:0 5px;">\
					<span style="font-weight:bold">'+date+'</span>\
					<div style="opacity:0.3;">$'+Math.round(Math.random()*999)+'</div>\
				</div>';
	}
}
Single Month Mode: Show Config
{
	singleMonth: true,
	showShortcuts: false,
	showTopbar: false
}
Show Week Numbers: Show Config
{
	showWeekNumbers: true
}
Show Week Numbers (start from monday): Show Config
{
	showWeekNumbers: true,
	startOfWeek: 'monday'
}
Show Week Numbers ( support fiscal year, start from 2015-08-16): Show Config
{
	showWeekNumbers: true,
	getWeekNumber: function(day)
	{
		var fiscalYearStart = moment('2015-08-16','YYYY-MM-DD');
		var daysOffset = parseInt(fiscalYearStart.format('DDD'),10);
		return moment(day).add( -1*daysOffset, 'days').format('W');
	}
}
Select forward: Show Config
{
	selectForward: true
}
Select backward: Show Config
{
	selectBackward: true
}
Typical usage, hotel booking: Show Config
{
	startDate: new Date(),
	selectForward: true,
	showDateFilter: function(time, date)
	{
		return '<div style="padding:0 5px;">\
					<span style="font-weight:bold">'+date+'</span>\
					<div style="opacity:0.3;">$'+Math.round(Math.random()*999)+'</div>\
				</div>';
	},
	beforeShowDay: function(t)
	{
		var valid = !(t.getDay() == 0 || t.getDay() == 6);  //disable saturday and sunday
		var _class = '';
		var _tooltip = valid ? '' : 'sold out';
		return [valid,_class,_tooltip];
	}
}				
Custom open/close animation: Show Config
{
	customOpenAnimation: function(cb)
	{
		$(this).fadeIn(300, cb);
	},
	customCloseAnimation: function(cb)
	{
		$(this).fadeOut(300, cb);
	}
}
Custom arrow symbol: Show Config
// To make this demo work completely, the FontAwesome stylesheets are required 				
{		
    customArrowPrevSymbol: '<i class="fa fa-arrow-circle-left"></i>',
    customArrowNextSymbol: '<i class="fa fa-arrow-circle-right"></i>'
}
				
Month and year select: Show Config
{
    monthSelect: true,
    yearSelect: true
}
				
Month and year select with year range by array: Show Config
{
    monthSelect: true,
    yearSelect: [1900, moment().get('year')]
}
				
Month and year select with year range by function: Show Config
{
    monthSelect: true,
    yearSelect: function(current) {
        return [current - 10, current + 10];
    }
}
				
Re-select option: to Show Config
{
    autoClose: true,
    quickReSelect: true,
    separator : ' to ',
	getValue: function()
	{
		if ($('#checkin').val() && $('#checkout').val() )
			return $('#checkin').val() + ' to ' + $('#checkout').val();
		else
			return '';
	},
	setValue: function(s,s1,s2)
	{
		$('#checkin').val(s1);
		$('#checkout').val(s2);
	}
}
				
Illegal range option: to Show Config
{
    autoClose: true,
    quickReSelect: true,
    illegalRange: false,
    separator : ' to ',
    fromFieldId: 'checkin2',
    toFieldId: 'checkout2',
	getValue: function()
	{
		if ($('#checkin2').val() && $('#checkout2').val() )
			return $('#checkin2').val() + ' to ' + $('#checkout2').val();
		else
			return '';
	},
	setValue: function(s,s1,s2)
	{
		$('#checkin2').val(s1);
		$('#checkout2').val(s2);
	}
}
				
Single month with range: to Show Config
{
    autoClose: true,
    quickReSelect: true,
    illegalRange: false,
    separator : ' to ',
    fromFieldId: 'checkin2',
    toFieldId: 'checkout2',
	getValue: function()
	{
		if ($('#checkin2').val() && $('#checkout2').val() )
			return $('#checkin2').val() + ' to ' + $('#checkout2').val();
		else
			return '';
	},
	setValue: function(s,s1,s2)
	{
		$('#checkin2').val(s1);
		$('#checkout2').val(s2);
	}
}
				
Bug #20180621: to

Configuration

The default configuration object is:

You can use the following keys in the configObject to overwrite the default configuration:

Events

events will be triggerred on the date range picker DOM


APIs

License