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

User another date format:

Change the seperator between date strings:

Configuration

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

The default configuration object is:

{
	format: 'YYYY-MM-DD',
	seperator: ' 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
}

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

seperator (String)
	The seperator 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	

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-close',function()
{
	console.log('close');
});

License

This date range picker plugin is under Codecanyon Tools License

jquery-1.5.1.min.js is under MIT LICENSE

moment.js & moment.min.js are under MIT LICENSE