Bootstrap Date-range Picker Initializer

bootstrap-daterangepicker-initializer.js

/**
 * Simple initializer for bootstrap-daterangepicker.
 * 
 * @copyright David Shepard 2015 (http://github.com/kynatro)
 * 
 * Abstracts the initialization requirements for Dan Grossman's bootstrap-daterangepicker
 * (http://www.daterangepicker.com/). 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 http://jquery.com/|jQuery}
 * @see {@link http://getbootstrap.com/|Bootstrap}
 * @see {@link http://momentjs.com/|Moment.js}
 * @see {@link http://www.daterangepicker.com/|Date Range Picker for Bootstrap}
 * @see {@link https://github.com/dangrossman/bootstrap-daterangepicker|Date Range Picker for Bootstrap Github Source}
 * 
 * This document is licensed as free software under the terms of the
 * MIT License: http://www.opensource.org/licenses/mit-license.php
 */
;(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 jQuery.data()
   * @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, this.elements.daterangepicker.data(), (options || {}));

    // Label target element to update when `updateLabel()` is called
    if(this.options.target){
      this.elements.targetContext = this.options.targetContext || this.elements.daterangepicker;
      this.elements.target = $(this.options.target, 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(this.elements.target) this.elements.target.html(this.formatLabel(start, end));
  };

  // Initialize the daterangepickers on the page
  $(function(){
    $('[data-toggle="daterangepicker"]').each(function(i, el){
      $(el).data('daterangepicker-instance', new DatePicker(el));
    });
  });
})(window, jQuery, null);