or run

npx @tessl/cli init

Version

Tile

Overview

Evals

Files

docs

configuration.md constructor-api.md events.md index.md instance-methods.md jquery-plugin.md localization.md

tile.json

jQuery Plugin Interface

The jQuery plugin interface provides the most convenient way to initialize date range pickers on elements using the familiar jQuery plugin pattern.

Capabilities

$.fn.daterangepicker Plugin Method

The jQuery plugin wrapper for initializing daterangepicker on selected elements.

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

Parameters:

options (object, optional): Configuration options (same as DateRangePicker constructor)
callback (function, optional): Function called when date range is selected

Returns: jQuery object for method chaining

Usage Examples:

// Basic initialization
$('#daterange-input').daterangepicker();

// With options
$('#daterange-input').daterangepicker({
  startDate: moment().subtract(7, 'days'),
  endDate: moment(),
  showDropdowns: 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()]
  }
});

// With callback
$('#daterange-input').daterangepicker({
  autoApply: true,
  locale: {
    format: 'MM/DD/YYYY'
  }
}, function(start, end, label) {
  console.log('New date range: ' + start.format('YYYYMMDD') + ' to ' + end.format('YYYYMMDD'));
});

// Method chaining
$('#daterange-input')
  .daterangepicker({
    timePicker: true,
    timePickerIncrement: 30,
    locale: {
      format: 'MM/DD/YYYY hh:mm A'
    }
  })
  .on('apply.daterangepicker', function(ev, picker) {
    $(this).val(picker.startDate.format('MM/DD/YYYY hh:mm A') + ' - ' + picker.endDate.format('MM/DD/YYYY hh:mm A'));
  });

Multiple Element Initialization

The plugin can be applied to multiple elements at once:

// Initialize on multiple elements
$('.daterange-input').daterangepicker({
  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')]
  }
});

// Each element gets its own DateRangePicker instance
$('.daterange-input').each(function() {
  var picker = $(this).data('daterangepicker');
  console.log('Element has picker:', picker instanceof DateRangePicker);
});

Accessing DateRangePicker Instance

The DateRangePicker instance is stored as jQuery data and can be accessed:

// Initialize picker
$('#daterange-input').daterangepicker({
  startDate: moment().subtract(7, 'days'),
  endDate: moment()
});

// Access the DateRangePicker instance
var picker = $('#daterange-input').data('daterangepicker');

// Use instance methods
picker.setStartDate(moment().subtract(30, 'days'));
picker.setEndDate(moment().subtract(1, 'days'));
picker.show();

// Access instance properties
console.log('Current start date:', picker.startDate.format('YYYY-MM-DD'));
console.log('Current end date:', picker.endDate.format('YYYY-MM-DD'));
console.log('Is showing:', picker.isShowing);

Event Handling with jQuery

The plugin integrates seamlessly with jQuery's event system:

// Initialize with event handlers
$('#daterange-input')
  .daterangepicker({
    autoUpdateInput: false,
    locale: {
      cancelLabel: 'Clear'
    }
  })
  .on('apply.daterangepicker', function(ev, picker) {
    $(this).val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format('MM/DD/YYYY'));
  })
  .on('cancel.daterangepicker', function(ev, picker) {
    $(this).val('');
  })
  .on('show.daterangepicker', function(ev, picker) {
    console.log('Picker opened');
  })
  .on('hide.daterangepicker', function(ev, picker) {
    console.log('Picker closed');
  });

Common Integration Patterns

Form Integration:

// Form integration with validation
$('#booking-form input[name="daterange"]').daterangepicker({
  startDate: moment(),
  minDate: moment(),
  maxDate: moment().add(1, 'year'),
  autoUpdateInput: false,
  locale: {
    cancelLabel: 'Clear'
  }
}, function(start, end, label) {
  // Update form and trigger validation
  $(this).val(start.format('MM/DD/YYYY') + ' - ' + end.format('MM/DD/YYYY'));
  $('#booking-form').trigger('validate');
});

AJAX Integration:

// AJAX data loading based on date range
$('#report-daterange').daterangepicker({
  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()]
  }
}).on('apply.daterangepicker', function(ev, picker) {
  $.ajax({
    url: '/api/reports',
    data: {
      start_date: picker.startDate.format('YYYY-MM-DD'),
      end_date: picker.endDate.format('YYYY-MM-DD')
    },
    success: function(data) {
      $('#report-content').html(data);
    }
  });
});

Single Date Picker:

// Single date picker for appointments
$('#appointment-date').daterangepicker({
  singleDatePicker: true,
  showDropdowns: true,
  minDate: moment(),
  locale: {
    format: 'MM/DD/YYYY'
  }
}, function(start, end, label) {
  console.log('Appointment date selected:', start.format('MM/DD/YYYY'));
});

Time Picker Integration:

// Date and time selection
$('#datetime-range').daterangepicker({
  timePicker: true,
  timePickerIncrement: 15,
  timePicker24Hour: false,
  timePickerSeconds: false,
  locale: {
    format: 'MM/DD/YYYY hh:mm A'
  }
}, function(start, end, label) {
  console.log('Date/time range:', start.format('MM/DD/YYYY hh:mm A') + ' - ' + end.format('MM/DD/YYYY hh:mm A'));
});

Plugin Data Storage

The plugin stores the DateRangePicker instance using jQuery's data method:

// Plugin stores instance as 'daterangepicker' data
var picker = $('#element').data('daterangepicker');

// Check if element has daterangepicker initialized
if ($('#element').data('daterangepicker')) {
  console.log('DateRangePicker is initialized');
}

// Remove daterangepicker
$('#element').data('daterangepicker').remove();
$('#element').removeData('daterangepicker');