DateRangePicker instances provide public methods for programmatic control of date selection, display state, and customization.
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 displayMethods 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');
}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 dataUser-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();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 documentationDynamic 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;
}