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

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

## Installation

    <link rel="stylesheet" href="daterangepicker.css" />
    <script src="moment.min.js"></script>
    <script src="jquery.daterangepicker.js"></script>

## 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 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'
    }

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

    {
    	shortcuts :
    	{
    		'next-days': [3,5,7],
    		'next': ['week','month','year']
    	}
    }

Use past date shortcuts: Show Config

    {
    	shortcuts :
    	{
    		'prev-days': [3,5,7],
    		'prev': ['week','month','year'],
    		'next-days':null,
    		'next':null
    	}
    }

Use custom shortcuts: Show Config

    {
    	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'
    			}
    		]
    }

Hide shortcuts: Show Config

    {
    	showShortcuts:false
    }

Auto-close after selection: Show Config

    {
    	autoClose: true
    }

Change the separator between date strings: Show Config

    {
    	separator : ' ~ '
    }

In-line mode: Show Config

    {
    	inline:true,
    	container: '#date-range12-container',
    	alwaysOpen:true
    }

Single Date mode: Show Config

    {
    	autoClose: true,
    	singleDate : true,
    	showShortcuts: false
    }

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').destroy();
    });

Sticky months: Show Config

    {
    	stickyMonths: true,
    	startDate: '2013-01-10',
    	endDate: '2013-05-10'
    }

## 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,
    	time: {
    		enabled: false
    	},
    	shortcuts:
    	{
    		//'prev-days': [1,3,5,7],
    		'next-days': [3,5,7],
    		//'prev' : ['week','month','year'],
    		'next' : ['week','month','year']
    	},
    	customShortcuts : [],
    	inline:false,
    	container: 'body',
    	alwaysOpen:false,
    	singleDate:false,
    	batchMode:false,
    	beforeShowDay: [function],
    	stickyMonths: false
    }

### 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, same format as `format`

    endDate (String or false)
    	This string defines the latest date which is allowed for the user, same format as `format`

    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

    time (Object)
    	If enabled adds time selection controls.

    customShortcuts (Array)
    	define custom shortcut buttons. see demo.js

    inline (Boolean)
    	whether to render the date range picker dom in inline mode instead of overlay mode,
    	if set to true, please set `container` too

    container (String, css selector || DOM Object)
    	where should the date range picker dom should be renderred to

    alwaysOpen (Boolean)
    	if you use inline mode, you may want the date range picker widget to be renderred when the page loads
    	set this to true will also hide the "close" button

    singleDate (Boolean)
    	choose a single date instead of a date range.

    batchMode (false / 'week' / 'month')
    	 auto batch select mode
    	 false (default), week, month, week-range, month-range

    beforeShowDay (Function)
    	A function that takes a date as a parameter and must return an array with:
    	[0]: true/false indicating whether or not this date is selectable
    	[1]: a CSS class name to add to the date's cell or "" for the default presentation
    	[2]: an optional popup tooltip for this date
    	The function is called for each day in the datepicker before it is displayed.

    stickyMonths (Boolean)
    	If true, there will only be one previous and one next button. Clicking them will change
    	both the months. This setting will have no effect if singleDate option is set to true

## Events

3 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');
    });

## APIs

    //after you called  $(dom).dateRangePicker();

    $(dom).data('dateRangePicker')
    	.setDateRange('2013-11-20','2013-11-25');  //set date range, two date strings should follow the `format` in config object, set the third argument to be `true` if you don't want this method to trigger a `datepicker-change` event.
    	.clear(); 	// clear date range
    	.close(); 	// close date range picker overlay
    	.open();	// open date range picker overlay
    	.destroy();	// destroy all date range picker related things

## License

    This date range picker plugin is under MIT LICENSE