jQuery可选择日期范围的日期选择器插件|DEMO_jQuery之家-自由分享jQuery、html5、css3的插件库

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