DateRange-Picker-Ex is a jQuery plugin that allows user to select a date range.
Requires jQuery 1.4.2+ (MIT LICENSE), MomentJS 2.9.0+ (MIT LICENSE)
Compatible Browsers:
Supports multi-language, you can choose a pre-defined language or set it to auto-detect mode.
You can also define new languages, refer to the translations module for example.
Easily customizeable colors and style to adopt to arbitrary theme.
Refer to the "Slate" delta CSS for example.
Interested in interactive time entry? Checkout TimeDropper-Ex.
Interested in comprehensive datetime range entry? Checkout DateTimeRanger.
<link rel="stylesheet" type="text/css" href="dist/daterangepicker.min.css" /> <!-- Optional "Slate" color theme --> <link rel="stylesheet" type="text/css" href="dist/daterangepicker.slate.delta.min.css" /> <script type="text/javascript" src="moment.min.js"></script> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="dist/jquery.daterangepicker.min.js"></script> <script type="text/javascript" src="dist/jquery.daterangepicker.lang.min.js"></script>
{}
{}
{
language : 'cn',
showWeekNumbers : true
}
{
language : 'en'
}
{
dateRange : {
start : '2014-11-20'
}
}
{
dateRange : {
start : '2013-01-10',
end : '2013-03-10'
}
}
{
minDays : 3,
maxDays : 7
}
{
startOfWeek : 1
}
{
getValue : function()
{
return this.innerHTML;
},
setValue : function(s)
{
this.innerHTML = s;
}
}
{
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[1]);
$('#date-range201').val(s2[1]);
}
}
{
format : 'dddd MMM Do, YYYY' //more formats at http://momentjs.com/docs/#/displaying/format/
}
{
shortcuts :
{
'next-days' : [3,5,7],
'next' : ['week','month','year']
}
}
{
shortcuts :
{
'prev-days' : [3,5,7],
'prev' : ['week','month','year']
}
}
{
shortcuts : {
custom : {
'this week' : function (daytime) {
var start = daytime.day(0).toDate();
var end = daytime.clone().day(6).toDate();
return [start, end];
},
'Oct 2014' : function (daytime) {
//move calendars to show this date's month and next month
var movetodate = moment('2014-10', 'YYYY-MM').toDate();
return [movetodate];
}
}
}
}
{
autoClose : true
}
{
inline : true,
container : $('#date-range12-container'),
alwaysOpen : true
autoClose : true
}
{
singleDate : true
}
{
autoClose : true,
singleDate : true,
singleMonth : true
}
{
batchMode : 'week'
}
{
batchMode : 'weekdays'
}
{
beforeShowDay : function(t)
{
//disable saturday and sunday
var valid = !(t.getDay() == 0 || t.getDay() == 6);
//allow skip disabled dates in later half of month (start/end at those dates is not allowed)
valid = valid || (t.getDate()>15? null : valid);
var _class = '';
var _tooltip = valid ? '' : (valid === false?'Disabled':'Skipped');
return [valid,_class,_tooltip];
}
}
$('#date-range16').dateRangePicker(
{
format : 'YYYY-MM-DD'
}).bind('DRPEx-change', function(evt, obj) {
alert('start: ' + obj.start + ' / end: ' + obj.end);
});
$('#date-range16-open').click(function(evt)
{
evt.stopPropagation();
$('#date-range16').data('DRPEx').open();
});
$('#date-range16-close').click(function(evt)
{
evt.stopPropagation();
$('#date-range16').data('DRPEx').close();
});
$('#date-range16-set').click(function(evt)
{
evt.stopPropagation();
$('#date-range16').data('DRPEx').setRange('2013-11-20','2014-08-25');
});
$('#date-range16-set-silent').click(function(evt)
{
evt.stopPropagation();
$('#date-range16').data('DRPEx').setRange('2014-11-03','2015-02-12', true);
});
$('#date-range16-clear').click(function(evt)
{
evt.stopPropagation();
$('#date-range16').data('DRPEx').clear();
});
$('#date-range16-destroy').click(function(evt)
{
evt.stopPropagation();
$('#date-range16').data('DRPEx');
});
$('#date-range16-reset').click(function(evt)
{
evt.stopPropagation();
$('#date-range16').data('DRPEx').resetView();
});
{
stickyMonths : true,
dateRange : {
start : '2013-01-10',
end : '2013-05-10'
}
}
{
customTopBar : 'Foo Bar'
}
{
hoveringTooltip : false
}
{
hoveringTooltip : function(days)
{
var D = ['One','Two', 'Three','Four','Five'];
return D[days] ? D[days] : days;
}
}
{
showDateFilter : function(time, date)
{
return '<div style="padding:0 5px;">'+\
'<span style="font-weight:bold">'+date+'</span>'+\
'<div style="opacity:0.3;">$'+Math.round(Math.random()*999)+'</div>'+\
'</div>';
}
}
{
singleMonth : true,
showTopbar : false
}
{
showWeekNumbers : true
}
{
showWeekNumbers : true,
startOfWeek : 1
}
{
showWeekNumbers : true,
getWeekNumber : function(day)
{
var fiscalYearStart = moment('2015-08-16','YYYY-MM-DD');
var daysOffset = parseInt(fiscalYearStart.format('DDD'),10);
return moment(day).add(-1*daysOffset, 'days').format('W');
}
}
{
selectForward : true
}
{
selectBackward : true
}
{
dateRange : {
start : moment().subtract(15,'hour').startOf('day').add(1,'day').toDate()
},
selectForward : true,
showWeekNumbers : true,
showDateFilter : function(time, date)
{
return '<div style="padding:0 5px;">'+
'<span style="font-weight:bold">'+date+'</span>+'
'<div style="opacity:0.3;">$'+Math.round(Math.random()*999)+'</div>+'
'</div>';
},
beforeShowDay : function(t)
{
var valid = !(t.getDay() == 0 || t.getDay() == 6); //disable saturday and sunday
var _class = '';
var _tooltip = valid ? '' : 'sold out';
return [valid,_class,_tooltip];
}
}
{
customOpenAnimation : function(cb)
{
$(this).fadeIn(300, cb);
},
customCloseAnimation : function(cb)
{
$(this).fadeOut(300, cb);
}
}
// To make this demo work completely, the FontAwesome stylesheets are required
{
customArrowPrevSymbol : '<i class="fa fa-arrow-circle-left"></i>',
customArrowNextSymbol : '<i class="fa fa-arrow-circle-right"></i>'
}
Usage: $('#dom-id').dateRangePicker(configObject);
The default configurations are:
{
autoStart : false,
autoClose : false,
watchValueChange: true,
format : 'YYYY-MM-DD',
separator : ' to ',
language : undefined,
startOfWeek : undefined,
getValue : function() {
return $(this).val();
},
setValue : function(s) {
if (s != $(this).val())
$(this).val(s).change();
},
dateRange : {
start : false,
end : false
},
minDays : 0,
maxDays : 0,
shortcuts: {
//'prev-days' : [1,3,5,7],
//'next-days' : [3,5,7],
//'prev' : ['week','month','year'],
//'next' : ['week','month','year'],
//'custom' : { 'name': function(daytime){} }
},
container : undefined,
alwaysOpen : false,
dropTrigger : true,
singleDate : false,
lookBehind : false,
batchMode : false,
animationTime : 200,
stickyMonths : false,
applyBtnClass : '',
hoveringTooltip : function(days, startTime, hoveringTime) {
return days > 1 ? days + ' ' + lang('days') : '';
},
showTopbar : true,
selectForward : false,
selectBackward : false,
showWeekNumbers : false,
getWeekNumber : function(date) //date will be the first day of a week {
return moment(date).format('w');
}
}
Configuration key definitions are:
format (String) The date format string used for MomentJS. See MomentJS documentation separator (String) The separator string used between date strings language (undefined or String) Pre-defined languages names; undefined = detect browser languages; New languages customizable. startOfWeek (undefined, 0 or 1) 0 = sunday, 1 = monday, undefined = derive from locale 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 dateRange.start (String, Date or false) This string defines the earliest date which is allowed for the user, same format as `format` dateRange.end (String, Date 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 shortcuts (Object) define the shortcuts buttons. there are some built in shortcuts, see source code 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. If `singleMonth` option is set to true it will show only one month instead of two months. batchMode (false or string) auto batch select mode false (default), week, weekdays, weekends, month 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. singleMonth (Boolean) If true, it will show only one month instead of two months. This setting is independent of singleDate, date range selection is allowed in one month view. showDateFilter (Function(Int time, Int date)) This is a callback function when creating each date element in the calendar. First paramter will be the timestamp of that day. Second parameter will be the date of that month. customTopBar (Function || String) If you set this parameter, it will use this value in the top bar. customArrowPrevSymbol (String / String HTML) Set custom previous symbol, you can use html snippet too. customArrowNextSymbol (String / String HTML) Set custom next symbol, you can use html snippet too. showTopbar (Boolean) If show the top bar. selectForward (Boolean) Default: false If this is true, you can only select second date after the first selected date. selectBackward (Boolean) Default: false If this is true, you can only select second date before the first selected date. showWeekNumbers (Boolean) Default: false If this is true, it will show week number of the year in the calendar. getWeekNumber (Function(Date object)) the function called to generate the week number. the first parameter will be the first day of a week
Events can be subscribed as the following:
$('#dom-id')
.dateRangePicker()
.bind('DRPEx-change',function(event,obj)
{
/* This event will be triggered when second date is selected */
console.log(obj);
// obj will be something like this:
// {
// [start: (Date object of the earlier date),]
// [end: (Date object of the later date),]
// or
// [date: (Single date object)]
// }
})
.bind('DRPEx-apply',function(event,obj)
{
/* This event will be triggered when user clicks on the apply button */
console.log(obj);
})
.bind('DRPEx-close',function()
{
/* This event will be triggered before date range picker close animation */
console.log('before close');
})
.bind('DRPEx-closed',function()
{
/* This event will be triggered after date range picker close animation */
console.log('after close');
})
.bind('DRPEx-open',function()
{
/* This event will be triggered before date range picker open animation */
console.log('before open');
})
.bind('DRPEx-opened',function()
{
/* This event will be triggered after date range picker open animation */
console.log('after open');
})
//after you called $(dom).dateRangePicker();
$(dom).data('DRPEx')
//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 `DRPEx-change` event.
.setRange('2013-11-20','2013-11-25');
//set the start date to the specified date
.setStart('2013-11-20');
//set the end date to the specified date
//set the second argument to `true` if you don't want this method to trigger a `DRPEx-change` event.
.setEnd('2013-11-25');
.clear(); // clear date range
.close(); // close date range picker overlay
.open(); // open date range picker overlay
.resetView(); // reset to default months
.destroy(); // destroy all date range picker related things