#jQuery Date Range Picker Plugin#
v0.0.3
jQuery Date Range Picker is a jQuery plugin that allows user to select a date range.
- Requires jQuery 1.3.2+, Moment 2.0.0+
- Supports IE6+, Firefox, Chrome, Safari and other standard HTML5 browsers.
- Supports multi-language
- Fully CSS styled
- Written by Chunlong ( jszen.com )
- I accept further customization job if you require more functions. Please contact me via longbill.cn@gmail.com
Live demostration and documentation is HERE
##Configuration##
Usage:
$('#dom-id').dateRangePicker(configObject);The default configuration object is:
{
format: 'YYYY-MM-DD',
separator: ' to ',
language: 'auto',
startOfWeek: 'sunday',// or monday
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
}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
time (Object) If enabled adds time selection controls.
shortcuts (Object) define the shortcuts buttons. there are some built in shortcuts, see source code
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
##Events##
Two events will be triggered 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');
});