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

instance-methods.mddocs/

Instance Methods

DateRangePicker instances provide public methods for programmatic control of date selection, display state, and customization.

Capabilities

Date Management Methods

Methods for programmatically setting and managing the selected date range.

/**
 * Sets the start date of the date range
 * @param {string|moment.Moment} startDate - The new start date (string or Moment object)
 */
setStartDate(startDate);

/**
 * Sets the end date of the date range  
 * @param {string|moment.Moment} endDate - The new end date (string or Moment object)
 */
setEndDate(endDate);

Usage Examples:

var picker = $('#daterange').data('daterangepicker');

// Set dates using Moment objects
picker.setStartDate(moment().subtract(7, 'days'));
picker.setEndDate(moment());

// Set dates using strings (parsed according to locale.format)
picker.setStartDate('01/01/2023');
picker.setEndDate('12/31/2023');

// Chain operations
picker.setStartDate(moment().startOf('month'));
picker.setEndDate(moment().endOf('month'));
picker.updateView(); // Refresh display

Display Control Methods

Methods for controlling the visibility and state of the date picker dropdown.

/**
 * Shows the date range picker dropdown
 * @param {Event} event - Optional event object
 */
show(event);

/**
 * Hides the date range picker dropdown
 * @param {Event} event - Optional event object  
 */
hide(event);

/**
 * Toggles the visibility of the date range picker dropdown
 * @param {Event} event - Optional event object
 */
toggle(event);

/**
 * Shows the calendar view (used when custom range is selected)
 */
showCalendars();

/**
 * Hides the calendar view
 */
hideCalendars();

Usage Examples:

var picker = $('#daterange').data('daterangepicker');

// Programmatically show/hide picker
$('#show-picker-btn').click(function() {
  picker.show();
});

$('#hide-picker-btn').click(function() {
  picker.hide();
});

// Toggle picker visibility
$('#toggle-picker-btn').click(function() {
  picker.toggle();
});

// Control calendar visibility for custom ranges
if (picker.chosenLabel === 'Custom Range') {
  picker.showCalendars();
} else {
  picker.hideCalendars();
}

// Check current visibility state
if (picker.isShowing) {
  console.log('Picker is currently visible');
}

Utility Methods

General purpose methods for updating display state and cleanup.

/**
 * Updates the visual display of the picker to reflect current state
 */
updateView();

/**
 * Removes the date range picker instance and cleans up event handlers
 */
remove();

Usage Examples:

var picker = $('#daterange').data('daterangepicker');

// Update display after programmatic changes
picker.setStartDate(moment().subtract(30, 'days'));
picker.setEndDate(moment());
picker.updateView(); // Refresh calendars and input display

// Cleanup when done
picker.remove(); // Removes DOM elements and event handlers
$('#daterange').removeData('daterangepicker'); // Clean up jQuery data

Customization Functions

User-overridable functions for customizing date validation and styling.

/**
 * Function to determine if a date should be disabled/invalid (user-overridable)
 * @param {moment.Moment} date - Date to validate
 * @returns {boolean} True if date should be disabled, false if selectable
 */
isInvalidDate(date);

/**
 * Function to apply custom CSS classes to dates (user-overridable)  
 * @param {moment.Moment} date - Date to customize
 * @returns {string|string[]|boolean} CSS class name(s) to apply, or false for no styling
 */
isCustomDate(date);

Usage Examples:

var picker = $('#daterange').data('daterangepicker');

// Disable weekends
picker.isInvalidDate = function(date) {
  return date.day() === 0 || date.day() === 6; // Sunday = 0, Saturday = 6
};

// Disable specific dates
picker.isInvalidDate = function(date) {
  var disabledDates = [
    '2023-12-25', // Christmas
    '2023-01-01', // New Year
    '2023-07-04'  // July 4th
  ];
  return disabledDates.indexOf(date.format('YYYY-MM-DD')) !== -1;
};

// Apply custom styling to special dates
picker.isCustomDate = function(date) {
  // Highlight holidays in red
  var holidays = ['2023-12-25', '2023-01-01', '2023-07-04'];
  if (holidays.indexOf(date.format('YYYY-MM-DD')) !== -1) {
    return 'holiday-date'; // CSS class to apply
  }
  
  // Highlight weekends in blue
  if (date.day() === 0 || date.day() === 6) {
    return ['weekend-date', 'special-styling']; // Multiple CSS classes
  }
  
  return false; // No custom styling
};

// Apply changes and refresh display
picker.updateView();

Method Chaining

Some methods can be chained for fluent API usage:

var picker = $('#daterange').data('daterangepicker');

// Methods that modify state can be chained with updateView()
picker.setStartDate(moment().subtract(7, 'days'))
      .setEndDate(moment())
      .updateView()
      .show();

// Note: Not all methods return the instance, check documentation

Advanced Usage Patterns

Dynamic Range Updates:

var picker = $('#daterange').data('daterangepicker');

// Update date range based on user selection
$('#quick-ranges button').click(function() {
  var range = $(this).data('range');
  
  switch(range) {
    case 'today':
      picker.setStartDate(moment());
      picker.setEndDate(moment());
      break;
    case 'week':
      picker.setStartDate(moment().subtract(6, 'days'));
      picker.setEndDate(moment());
      break;
    case 'month':
      picker.setStartDate(moment().subtract(29, 'days'));
      picker.setEndDate(moment());
      break;
  }
  
  picker.updateView();
  
  // Trigger apply event manually if autoApply is false
  if (!picker.autoApply) {
    picker.element.trigger('apply.daterangepicker', picker);
  }
});

Conditional Display Control:

var picker = $('#daterange').data('daterangepicker');

// Show picker only if user has permission
if (userHasPermission('modify_dates')) {
  picker.show();
} else {
  picker.hide();
}

// Auto-hide picker on certain conditions
picker.element.on('apply.daterangepicker', function(ev, picker) {
  if (picker.autoApply) {
    setTimeout(function() {
      picker.hide();
    }, 1000); // Auto-hide after 1 second
  }
});

Custom Validation Integration:

var picker = $('#daterange').data('daterangepicker');

// Override validation with business logic
picker.isInvalidDate = function(date) {
  // Disable dates outside business hours/days
  if (date.day() === 0 || date.day() === 6) return true; // Weekends
  if (date.isBefore(moment().add(1, 'day'))) return true; // Must be at least tomorrow
  if (date.isAfter(moment().add(90, 'days'))) return true; // Max 90 days out
  
  // Check against backend availability
  return !isDateAvailable(date.format('YYYY-MM-DD'));
};

function isDateAvailable(dateString) {
  // This would typically be an AJAX call or cached data
  var unavailableDates = getUnavailableDates();
  return unavailableDates.indexOf(dateString) === -1;
}