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.0.0+ (MIT LICENSE)

Supports IE6+, 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

Demonstrations

Default settings:

Default settings with default value:

Force to Chinese:

Force to English:

Use custom language:

Select a date range after 2014-11-20:

Select a date range between 2013-01-10 to 2013-02-10:

Select a date range between 3 days and 7 days:

Set start of week to Monday:

Use SPAN instead of INPUT: select

Use two inputs: to

Use another date format:

Use future date shortcuts:

Use past date shortcuts:

Use custom shortcuts:

Hide shortcuts:

Auto-close after selection:

Change the separator between date strings:

Configuration

Usage: $('#dom-id').dateRangePicker(configObject);

The default configuration object is:

{
	format: 'YYYY-MM-DD',
	separator: ' to ',
	language: 'auto',
	startOfWeek: 'sunday',// or sunday
	getValue: function()
	{
		return this.value;
	},
	setValue: function(s)
	{
		this.value = s;
	},
	startDate: false,
	endDate: false,
	minDays: 0,
	maxDays: 0,
	showShortcuts: true,
	shortcuts: 
	{
		//'prev-days': [1,3,5,7],
		'next-days': [3,5,7],
		//'prev' : ['week','month','year'],
		'next' : ['week','month','year']
	},
	customShortcuts : []
}

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

format (String)
	The date format string used for Moment.
	click here to see Moment documentation

separator (String)
	The separator string used between date strings

language (String)
	pre-defined languages are "en" and "cn", you can define your own 
 	language then set this to the name of new language.
	You can also set this to "auto" to make it auto detect browser language.

startOfWeek (String)
	"sunday" or "monday"

getValue (Function)
	This function is called when get date range string from DOM
	When it is called, the context of this function is set to the datepicker DOM

setValue (Function)
	This function is called when set date range string to DOM

startDate (String or false)
	This string defines the earliest date which is allowed for the user

endDate (String or false)
	This string defines the latest date which is allowed for the user
	
minDays (Number)
	This number defines the minimum days of the selected range
	if this is 0, means do not limit minimum days

maxDays (Number)
	This number defines the maximum days of the selected range
	if this is 0, means do not limit maximum days
showShortcuts (Boolean)
	hide or show shortcuts area	
shortcuts (Object)
	define the shortcuts buttons. there are some built in shortcuts, see source code	
customShortcuts (Array)
	define custom shortcut buttons. see demo.js	

Events

Two events will be triggerred on the date range picker DOM

$('#dom-id')
.dateRangePicker()
.bind('datepicker-change',function(event,obj)
{
	console.log(obj);
	// obj will be something like this:
	// {
	// 		date1: (Date object of the earlier date),
	// 		date2: (Date object of the later date),
	//	 	value: "2013-06-05 to 2013-06-07"
	// }
})
.bind('datepicker-apply',function(event,obj)
{
	console.log(obj);
})
.bind('datepicker-close',function()
{
	console.log('close');
});

License

This date range picker plugin is under MIT LICENSE