or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

configuration.mdconstructor-api.mdevents.mdindex.mdinstance-methods.mdjquery-plugin.mdlocalization.md
tile.json

tessl/npm-bootstrap-daterangepicker

Date range picker component for Bootstrap that creates an intuitive dropdown interface for selecting date ranges with extensive customization options.

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/bootstrap-daterangepicker@2.1.x

To install, run

npx @tessl/cli install tessl/npm-bootstrap-daterangepicker@2.1.0

index.mddocs/

Bootstrap DateRangePicker

Bootstrap DateRangePicker is a comprehensive jQuery plugin that creates an intuitive dropdown date range selection component specifically designed for Bootstrap. It provides extensive customization options for date range limits, localization, single date selection, time picking, and responsive styling that seamlessly integrates with Bootstrap 3's default theme.

Package Information

  • Package Name: bootstrap-daterangepicker
  • Package Type: npm
  • Language: JavaScript
  • Installation: npm install bootstrap-daterangepicker
  • Dependencies: jQuery (>=1.10), Moment.js (^2.9.0)
  • Bootstrap Compatibility: Bootstrap 3.x (for default styling)

Core Imports

// UMD module - browser globals
var DateRangePicker = window.daterangepicker;

// CommonJS
const DateRangePicker = require('bootstrap-daterangepicker');

// AMD
define(['bootstrap-daterangepicker'], function(DateRangePicker) {
  // Use DateRangePicker
});

jQuery plugin usage:

// jQuery plugin style (most common)
$('input[name="daterange"]').daterangepicker(options, callback);

Basic Usage

// Simple date range picker
$('input[name="daterange"]').daterangepicker({
  startDate: moment().subtract(29, 'days'),
  endDate: moment(),
  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')]
  }
}, function(start, end, label) {
  console.log('New date range selected: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD') + ' (predefined range: ' + label + ')');
});

// Listen for events
$('input[name="daterange"]').on('apply.daterangepicker', function(ev, picker) {
  console.log(picker.startDate.format('YYYY-MM-DD'));
  console.log(picker.endDate.format('YYYY-MM-DD'));
});

Architecture

Bootstrap DateRangePicker is built with several key components:

  • UMD Module Pattern: Supports AMD, CommonJS, and browser globals for maximum compatibility
  • jQuery Plugin Integration: Primary interface through $.fn.daterangepicker for seamless jQuery integration
  • DateRangePicker Class: Core constructor with comprehensive option handling and DOM manipulation
  • Event System: Rich event lifecycle with show/hide, apply/cancel, and calendar events
  • Moment.js Integration: Complete dependency on Moment.js for date parsing, formatting, and manipulation
  • Bootstrap Styling: Default CSS designed for Bootstrap 3 integration with customizable templates

Capabilities

Core DateRangePicker Constructor

Primary constructor function for creating date range picker instances with extensive configuration options.

/**
 * Creates a new DateRangePicker instance
 * @param {jQuery|Element} element - Target element to attach picker to
 * @param {Object} options - Configuration options object
 * @param {Function} callback - Optional callback function called on date selection
 * @returns {DateRangePicker} DateRangePicker instance
 */
function DateRangePicker(element, options, callback);

DateRangePicker Constructor

jQuery Plugin Integration

jQuery plugin wrapper providing the most common interface for initializing date range pickers on elements.

/**
 * jQuery plugin for initializing daterangepicker on elements
 * @param {Object} options - Configuration options
 * @param {Function} callback - Optional callback function
 * @returns {jQuery} jQuery object for chaining
 */
$.fn.daterangepicker(options, callback);

jQuery Plugin Interface

Instance Methods

Public methods available on DateRangePicker instances for programmatic control.

// Date management
setStartDate(startDate);
setEndDate(endDate);

// Display control
show(event);
hide(event);
toggle(event);
showCalendars();
hideCalendars();

// Utility methods
updateView();
remove();

// Customization functions (user-overridable)
isInvalidDate(date);
isCustomDate(date);

Instance Methods

Configuration Options

Comprehensive configuration system covering dates, display, behavior, styling, and localization.

interface DateRangePickerOptions {
  // Date settings
  startDate?: string | moment.Moment;
  endDate?: string | moment.Moment;
  minDate?: string | moment.Moment;
  maxDate?: string | moment.Moment;
  dateLimit?: object;
  ranges?: object;
  
  // Display options
  opens?: 'left' | 'right' | 'center';
  drops?: 'up' | 'down';
  showDropdowns?: boolean;
  showWeekNumbers?: boolean;
  showISOWeekNumbers?: boolean;
  showCustomRangeLabel?: boolean;
  alwaysShowCalendars?: boolean;
  
  // Behavior options
  autoApply?: boolean;
  autoUpdateInput?: boolean;
  linkedCalendars?: boolean;
  singleDatePicker?: boolean;
  
  // Time picker options
  timePicker?: boolean;
  timePicker24Hour?: boolean;
  timePickerIncrement?: number;
  timePickerSeconds?: boolean;
  
  // Styling options
  parentEl?: string | jQuery;
  buttonClasses?: string;
  applyClass?: string;
  cancelClass?: string;
  template?: string | jQuery;
  
  // Localization
  locale?: LocaleOptions;
}

Configuration Options

Event System

Rich event system for responding to picker state changes and user interactions.

// Event names (all namespaced with .daterangepicker)
'show.daterangepicker'
'hide.daterangepicker'
'showCalendar.daterangepicker'
'hideCalendar.daterangepicker'
'apply.daterangepicker'
'cancel.daterangepicker'
'outsideClick.daterangepicker'

Event System

Localization

Complete localization support for international applications with customizable date formats, labels, and calendar layouts.

interface LocaleOptions {
  direction?: 'ltr' | 'rtl';
  format?: string;
  separator?: string;
  applyLabel?: string;
  cancelLabel?: string;
  weekLabel?: string;
  customRangeLabel?: string;
  daysOfWeek?: string[];
  monthNames?: string[];
  firstDay?: number;
}

Localization

Types

interface DateRangePicker {
  // State properties
  startDate: moment.Moment;
  endDate: moment.Moment;
  chosenLabel: string;
  isShowing: boolean;
  element: jQuery;
  container: jQuery;
  
  // Configuration properties (all options become instance properties)
  parentEl: string | jQuery;
  minDate: moment.Moment | false;
  maxDate: moment.Moment | false;
  dateLimit: object | false;
  autoApply: boolean;
  singleDatePicker: boolean;
  showDropdowns: boolean;
  showWeekNumbers: boolean;
  showISOWeekNumbers: boolean;
  showCustomRangeLabel: boolean;
  timePicker: boolean;
  timePicker24Hour: boolean;
  timePickerIncrement: number;
  timePickerSeconds: boolean;
  linkedCalendars: boolean;
  autoUpdateInput: boolean;
  alwaysShowCalendars: boolean;
  ranges: object;
  opens: string;
  drops: string;
  buttonClasses: string;
  applyClass: string;
  cancelClass: string;
  locale: object;
  callback: Function;
}