tessl/npm-bootstrap-daterangepicker

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

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

DateRangePicker Constructor

Name: tessl/npm-bootstrap-daterangepicker
Author: tessl

The DateRangePicker constructor creates new date range picker instances with comprehensive configuration options and lifecycle management.

Capabilities

DateRangePicker Constructor

Creates a new DateRangePicker instance attached to a DOM element with optional configuration and callback.

/**
 * Creates a new DateRangePicker instance
 * @param {jQuery|Element} element - Target element to attach picker to (required)
 * @param {Object} options - Configuration options object (optional)
 * @param {Function} callback - Callback function called when date range is selected (optional)
 * @returns {DateRangePicker} DateRangePicker instance
 */
function DateRangePicker(element, options, callback);

Parameters:

element (jQuery object or DOM element): The input element or container to attach the date range picker to
options (object, optional): Configuration options object (see Configuration Options documentation)
callback (function, optional): Function called when user selects a date range, receives (startDate, endDate, label) parameters

Returns: DateRangePicker instance with all public methods and properties

Usage Examples:

// Basic constructor usage
var picker = new DateRangePicker($('#daterange-input'));

// With options
var picker = new DateRangePicker($('#daterange-input'), {
  startDate: moment().subtract(7, 'days'),
  endDate: moment(),
  showDropdowns: true,
  locale: {
    format: 'MM/DD/YYYY'
  }
});

// With callback
var picker = new DateRangePicker($('#daterange-input'), {
  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()]
  }
}, function(start, end, label) {
  console.log('Selected: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
  if (label) {
    console.log('Predefined range: ' + label);
  }
});

// Direct DOM element reference
var picker = new DateRangePicker(document.getElementById('daterange-input'), {
  singleDatePicker: true,
  showDropdowns: true
});

Constructor Behavior

The constructor performs the following initialization:

Element Binding: Attaches to the provided DOM element and wraps it with jQuery if needed
Option Processing: Merges user options with data attributes and default settings
DOM Creation: Creates the picker's HTML structure and appends it to the specified parent element
Event Binding: Sets up all necessary event handlers for user interaction
Initial State: Sets default or configured start/end dates and updates the display
Callback Registration: Stores the callback function for later invocation

Default Values

The constructor initializes the following default values:

// Default configuration values set by constructor
{
  parentEl: 'body',
  startDate: moment().startOf('day'),
  endDate: moment().endOf('day'),
  minDate: false,
  maxDate: false,
  dateLimit: false,
  autoApply: false,
  singleDatePicker: false,
  showDropdowns: false,
  showWeekNumbers: false,
  showISOWeekNumbers: false,
  showCustomRangeLabel: true,
  timePicker: false,
  timePicker24Hour: false,
  timePickerIncrement: 1,
  timePickerSeconds: false,
  linkedCalendars: true,
  autoUpdateInput: true,
  alwaysShowCalendars: false,
  ranges: {},
  opens: 'right', // or 'left' if element has 'pull-right' class
  drops: 'down', // or 'up' if element has 'dropup' class
  buttonClasses: 'btn btn-sm',
  applyClass: 'btn-success',
  cancelClass: 'btn-default',
  locale: {
    direction: 'ltr',
    format: moment.localeData().longDateFormat('L'),
    separator: ' - ',
    applyLabel: 'Apply',
    cancelLabel: 'Cancel',
    weekLabel: 'W',
    customRangeLabel: 'Custom Range',
    daysOfWeek: moment.weekdaysMin(),
    monthNames: moment.monthsShort(),
    firstDay: moment.localeData().firstDayOfWeek()
  }
}

Data Attribute Integration

The constructor automatically reads configuration from HTML data attributes:

<!-- HTML data attributes are automatically merged with options -->
<input type="text" 
       data-start-date="01/01/2023"
       data-end-date="12/31/2023"
       data-show-dropdowns="true"
       data-locale-format="MM/DD/YYYY"
       id="daterange-input">

// Data attributes are merged before explicit options
var picker = new DateRangePicker($('#daterange-input'), {
  // These options will override any conflicting data attributes
  autoApply: true
});

Error Handling

The constructor validates and corrects common configuration issues:

Invalid date ranges are automatically corrected
Missing dependencies (jQuery, Moment.js) will cause initialization to fail
Invalid DOM elements will cause initialization to fail
Invalid date formats fall back to Moment.js locale defaults

Instance Properties

After construction, the instance exposes all configuration options as properties plus additional state properties:

// Example of accessing instance properties after construction
console.log(picker.startDate.format('YYYY-MM-DD'));
console.log(picker.endDate.format('YYYY-MM-DD'));
console.log(picker.isShowing); // boolean
console.log(picker.element); // jQuery object
console.log(picker.container); // jQuery object of picker DOM structure