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.8.1+ (MIT LICENSE)
Supports IE8+, 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
{}
{ startOfWeek: 'monday', separator : ' ~ ', format: 'DD.MM.YYYY HH:mm', autoClose: false, time: { enabled: true } }
{ startOfWeek: 'monday', separator : ' ~ ', format: 'DD.MM.YYYY HH:mm', autoClose: false, time: { enabled: true }, defaultTime: moment().startOf('day').toDate(), defaultEndTime: moment().endOf('day').toDate() }
{}
{ language:'cn' }
{ language:'en' }
{ language: 'custom' }
{ startDate: '2014-11-20' }
{ maxDays: 7, minDays: 3 }
{ startDate: '2013-01-10', endDate: '2013-02-10' }
{ minDays: 3, maxDays: 7 }
{ startOfWeek: 'monday' }
{ 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); $('#date-range201').val(s2); } }
{ format: 'dddd MMM Do, YYYY' //more formats at http://momentjs.com/docs/#/displaying/format/ }
{ showShortcuts: true, shortcuts : { 'next-days': [3,5,7], 'next': ['week','month','year'] } }
{ showShortcuts: true, shortcuts : { 'prev-days': [3,5,7], 'prev': ['week','month','year'], 'next-days':null, 'next':null } }
{ showShortcuts: true, 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]; } } ] }
{ 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' } ] }
{ autoClose: true }
{ inline:true, container: '#date-range12-container', alwaysOpen:true }
{ autoClose: true, singleDate : true, showShortcuts: false }
{ autoClose: true, singleDate : true, showShortcuts: false, singleMonth: true }
{ batchMode: 'week', showShortcuts: false }
{ batchMode: 'week-range', showShortcuts: false }
{ 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]; } }
$('#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'); }); $('#date-range16-reset').click(function(evt) { evt.stopPropagation(); $('#date-range16').data('dateRangePicker').resetMonthsView(); });
{ stickyMonths: true, startDate: '2013-01-10', endDate: '2013-05-10' }
{ customTopBar: 'Foo Bar' }
{ extraClass: 'date-range-picker19' } .date-picker-wrapper.date-range-picker19 .day.first-date-selected { background-color: red !important; } .date-picker-wrapper.date-range-picker19 .day.last-date-selected { background-color: orange !important; }
{ 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, showShortcuts: false, showTopbar: false }
{ showWeekNumbers: true }
{ showWeekNumbers: true, startOfWeek: 'monday' }
{ 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 }
{ startDate: new Date(), selectForward: 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>' }
{ monthSelect: true, yearSelect: true }
{ monthSelect: true, yearSelect: [1900, moment().get('year')] }
{ monthSelect: true, yearSelect: function(current) { return [current - 10, current + 10]; } }
{ autoClose: true, quickReSelect: true, separator : ' to ', getValue: function() { if ($('#checkin').val() && $('#checkout').val() ) return $('#checkin').val() + ' to ' + $('#checkout').val(); else return ''; }, setValue: function(s,s1,s2) { $('#checkin').val(s1); $('#checkout').val(s2); } }
{ autoClose: true, quickReSelect: true, illegalRange: false, separator : ' to ', fromFieldId: 'checkin2', toFieldId: 'checkout2', getValue: function() { if ($('#checkin2').val() && $('#checkout2').val() ) return $('#checkin2').val() + ' to ' + $('#checkout2').val(); else return ''; }, setValue: function(s,s1,s2) { $('#checkin2').val(s1); $('#checkout2').val(s2); } }
{ autoClose: true, quickReSelect: true, illegalRange: false, separator : ' to ', fromFieldId: 'checkin2', toFieldId: 'checkout2', getValue: function() { if ($('#checkin2').val() && $('#checkout2').val() ) return $('#checkin2').val() + ' to ' + $('#checkout2').val(); else return ''; }, setValue: function(s,s1,s2) { $('#checkin2').val(s1); $('#checkout2').val(s2); } }
The default configuration object is:
events will be triggerred on the date range picker DOM