Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Bootstrap Date-range Picker Initializer
* Simple initializer for bootstrap-daterangepicker.
* @copyright David Shepard 2015 (
* Abstracts the initialization requirements for Dan Grossman's bootstrap-daterangepicker
* ( This initializer needs Moment.js, jQuery, Bootstrap
* and the Bootstrap Date Range Picker libraries loaded to operate.
* To take advantage of this script, just add [data-toggle="daterangepicker"] to any element
* and it will get picked up and made into a Bootstrap Date Range Picker UI. You can
* override any of the default options via data properties on the element.
* If you want to have an element populated with the selected date range value, specify a
* `data-target` property and `data-target-context` property. Both properties should be
* CSS selectors. If no `data-target-context` property is specified, the element that is
* being made into a date range picker will be assumed as the context.
* @example
* <div data-toggle="daterangepicker" data-target="> .daterange" data-start-date="2015-01-01" data-end-date="2015-02-01">
* <span class="daterange"></span>
* </div>
* @requires jQuery
* @requires Bootstrap
* @requires Moment.js
* @requires Date Range Picker for Bootstrap
* @see {@link|jQuery}
* @see {@link|Bootstrap}
* @see {@link|Moment.js}
* @see {@link|Date Range Picker for Bootstrap}
* @see {@link|Date Range Picker for Bootstrap Github Source}
* This document is licensed as free software under the terms of the
* MIT License:
;(function(window, $, undefined){
* DatePicker Class
* @param {DOMObject} el A DOM element to apply the bootstrap-daterangepicker to. Data
* attributes on this element will override default options.
* @param {Object} options An optional Object to override default option values. Data
* properties on the DOM element will be overridden by values
* in this Object.
* @uses jQuery()
* @uses
* @uses jQuery.extend()
* @uses jQuery.daterangepicker()
* @uses DatePicker.updateLabel()
* {constructor}
var DatePicker = function(el, options){
var self = this;
// Elements used in this instance
this.elements = {
daterangepicker: $(el),
// Combine the options passed in with the defaults
this.options = $.extend(this.defaults,, (options || {}));
// Label target element to update when `updateLabel()` is called
this.elements.targetContext = this.options.targetContext || this.elements.daterangepicker; = $(, this.elements.targetContext);
// Initiate the bootstrap-daterangepicker
this.elements.daterangepicker.daterangepicker(this.options, function(start, end, label){
self.updateLabel(start, end);
this.updateLabel(moment(this.options.startDate), moment(this.options.endDate));
return this;
// Default options for bootstrap-daterangepicker
DatePicker.prototype.defaults = {
format: 'YYYY-MM-DD',
outputFormat: 'dddd MMM D, YYYY',
startDate: moment().subtract(29, 'days'),
endDate: moment(),
minDate: '2014-10-01',
maxDate: moment().endOf('year'),
dateLimit: { days: 60 },
showDropdowns: true,
showWeekNumbers: true,
timePicker: false,
timePickerIncrement: 1,
timePicker12Hour: true,
ranges: {
'Today': [moment(), moment()],
'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
'Last 7 Days': [moment().subtract(6, 'days'), moment()],
'Last 30 Days': [moment().subtract(29, 'days'), moment()],
'This Month': [moment().startOf('month'), moment().endOf('month')],
'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
opens: 'left',
buttonClasses: ['btn', 'btn-sm'],
applyClass: 'btn-primary',
cancelClass: 'btn-default',
separator: ' to ',
locale: {
applyLabel: 'Submit',
cancelLabel: 'Cancel',
fromLabel: 'From',
toLabel: 'To',
customRangeLabel: 'Custom',
daysOfWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr','Sa'],
monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
firstDay: 1
* Format label string
* Formats a string to describe the date range based on the options.outputFormat
* value. The formatted string will also recognize "yesterday" and "today" and
* modify the label string to "Yesterday" or "Today" as appropriate.
* @param {Date} start Date object to start the date range
* @param {Date} end Date object to end the date range
* @uses moment().format()
* @uses moment().subtract()
* @returns {String}
DatePicker.prototype.formatLabel = function(start, end){
// Basic date format for comparison
var dayFormat = "YYYYMMDD",
// Start date formatted as a date string
startFormatted = start.format(dayFormat),
// End date formatted as a date string
endFormatted = end.format(dayFormat),
// Today formatted as a date string
todayFormatted = moment().format(dayFormat),
// Default formatted label
formattedLabel = start.format(this.options.outputFormat) + ' - ' + end.format(this.options.outputFormat);
// A single day
if(startFormatted == endFormatted) formattedLabel = start.format(this.options.outputFormat);
// Today
if(startFormatted == endFormatted && startFormatted == todayFormatted) formattedLabel = "Today";
// Yesterday
if(startFormatted == endFormatted && startFormatted == moment().subtract(1, 'days').format(dayFormat)) formattedLabel = "Yesterday";
return formattedLabel;
* Update label associated with bootstrap-datepicker
* Formats a text string based off the dates passed in and updates the
* label associated with the instance (if a target was provided). If no
* target label element exists, this method does nothing.
* @param {Date} start Date object to start the date range
* @param {Date} end Date object to end the date range
* @uses DatePicker.formatLabel()
DatePicker.prototype.updateLabel = function(start, end){
if(, end));
// Initialize the daterangepickers on the page
$('[data-toggle="daterangepicker"]').each(function(i, el){
$(el).data('daterangepicker-instance', new DatePicker(el));
})(window, jQuery, null);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment