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

constructor-api.mddocs/

DateRangePicker Constructor

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:

  1. Element Binding: Attaches to the provided DOM element and wraps it with jQuery if needed
  2. Option Processing: Merges user options with data attributes and default settings
  3. DOM Creation: Creates the picker's HTML structure and appends it to the specified parent element
  4. Event Binding: Sets up all necessary event handlers for user interaction
  5. Initial State: Sets default or configured start/end dates and updates the display
  6. 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