Codakey
Play
← Back to dangrossman/bootstrap-daterangepicker

How to Deploy & Use dangrossman/bootstrap-daterangepicker

Date Range Picker Deployment & Usage Guide

A comprehensive guide for integrating the Bootstrap Date Range Picker component into your web applications.

1. Prerequisites

Runtime Dependencies

  • jQuery (1.10+, 2.x, or 3.x) — Required for DOM manipulation
  • Moment.js (2.9.0+) — Required for date parsing and formatting
  • Bootstrap (3.x or 4.x) — Required for CSS styling (optional if using custom CSS)

Development Dependencies (for contributing or running examples)

  • Node.js (v10+) and npm
  • Git — For cloning the repository

Browser Support

  • Chrome, Firefox, Safari, Edge (latest versions)
  • Internet Explorer 9+ (with polyfills for IE9)

2. Installation

Option A: NPM (Recommended for modern workflows)

npm install daterangepicker --save

Option B: Direct Download

git clone https://github.com/dangrossman/daterangepicker.git
cd daterangepicker

Include the files directly in your HTML:

<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />

Option C: Meteor

meteor add dangrossman:bootstrap-daterangepicker

Option D: AMD (RequireJS)

Ensure your RequireJS config includes paths for jQuery, Moment, and the date range picker:

requirejs.config({
    "paths": {
      "jquery": "https://code.jquery.com/jquery-1.11.3.min",
      "moment": "../../moment",
      "daterangepicker": "../../daterangepicker"
    }
});

3. Configuration

Basic Initialization

Attach the picker to an input element:

$('input[name="dates"]').daterangepicker();

Common Configuration Options

Based on the component's API, configure via an options object:

$('#reportrange').daterangepicker({
    // Date display
    singleDatePicker: false,        // Enable single date selection mode
    showDropdowns: true,            // Show year/month dropdowns
    showWeekNumbers: true,          // Show ISO week numbers
    showISOWeekNumbers: true,       // Show ISO week numbers
    
    // Time picker options
    timePicker: true,               // Enable time selection
    timePicker24Hour: true,         // Use 24-hour format
    timePickerIncrement: 30,        // Minute increment (default: 1)
    timePickerSeconds: true,        // Show seconds selector
    
    // Date constraints
    minYear: 2020,                  // Minimum selectable year
    maxYear: 2025,                  // Maximum selectable year
    maxSpan: { days: 7 },           // Limit range selection to 7 days
    autoApply: true,                // Auto-apply selection without clicking Apply
    
    // Predefined ranges
    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')]
    },
    
    // Localization
    locale: {
        format: 'MM/DD/YYYY',
        separator: ' - ',
        applyLabel: 'Apply',
        cancelLabel: 'Cancel',
        weekLabel: 'W',
        customRangeLabel: 'Custom Range',
        daysOfWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
        monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
        firstDay: 1
    },
    
    // Callbacks
    function(start, end, label) {
        console.log('New date range selected: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD') + ' (predefined range: ' + label + ')');
    }
});

Event Handling

$('#reportrange').on('apply.daterangepicker', function(ev, picker) {
    console.log(picker.startDate.format('YYYY-MM-DD'));
    console.log(picker.endDate.format('YYYY-MM-DD'));
});

$('#reportrange').on('cancel.daterangepicker', function(ev, picker) {
    // Reset logic here
});

4. Build & Run (Development)

To run the included examples locally:

AMD Example

cd example/amd
# Serve via local web server (Python 3)
python -m http.server 8000
# Or Python 2
python -m SimpleHTTPServer 8000

Navigate to http://localhost:8000 and open index.html.

Browserify Example

cd example/browserify
npm install
npm run build  # Compiles main.js with Browserify
# Open index.html in browser

Website/Documentation

cd website
# Serve root directory via web server
python -m http.server 8000

Navigate to http://localhost:8000/website/ to view the interactive documentation.

5. Deployment

Integration into Web Applications

Static HTML Sites: Include CDN links or local copies in your HTML <head>:

<link rel="stylesheet" type="text/css" href="daterangepicker.css" />
<script src="jquery.min.js"></script>
<script src="moment.min.js"></script>
<script src="daterangepicker.js"></script>

Webpack/Rollup/Parcel Projects:

import $ from 'jquery';
import moment from 'moment';
import 'daterangepicker';
import 'daterangepicker/daterangepicker.css';

// Initialize after DOM ready
$(function() {
    $('#daterange').daterangepicker();
});

Content Security Policy (CSP): If using strict CSP headers, ensure you allow:

  • unsafe-eval (for the configuration text evaluation in examples, not required for production)
  • Inline styles for the calendar positioning

Production Optimization

  1. Minification: Use minified versions (daterangepicker.min.js, daterangepicker.min.css)
  2. Tree Shaking: Import only necessary Moment.js locales to reduce bundle size
  3. CDN: Use jsdelivr or unpkg for caching: 
    <script src="https://cdn.jsdelivr.net/npm/daterangepicker@3.1.0/daterangepicker.min.js"></script>

Publishing (for contributors)

# Update version in package.js and package.json
npm version patch  # or minor/major
npm publish

6. Troubleshooting

Common Issues

"moment is not defined" Error

  • Ensure Moment.js is loaded before the date range picker
  • Check that Moment is available globally (for browser) or properly imported (for modules)

Picker not appearing / CSS issues

  • Verify daterangepicker.css is loaded
  • Check for Bootstrap CSS conflicts (ensure Bootstrap 3 or 4 CSS is present)
  • Ensure the input element has proper positioning (relative/absolute) if using container option

Date format not recognized

  • Verify Moment.js locale matches your expected format
  • Use locale: { format: 'YYYY-MM-DD' } to enforce specific formats

AMD/RequireJS loading failures

  • Ensure paths in requirejs.config correctly point to jQuery, Moment, and daterangepicker
  • Load order: jQuery → Moment → DateRangePicker

Meteor integration issues

  • Ensure momentjs:moment and jquery packages are added to your Meteor project
  • CSS may need manual import: @import 'daterangepicker/daterangepicker.css';

Time picker shows incorrect values

  • Check timePickerIncrement value (must be a number divisible into 60)
  • Verify server timezone matches client expectations; the picker uses client-side time

Debug Mode

Enable console logging to inspect the picker state:

var picker = $('#daterange').data('daterangepicker');
console.log(picker.startDate, picker.endDate);
← Project overviewView alternatives to dangrossman/bootstrap-daterangepicker →