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

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