repository·master·Indexed 27 days ago
https://github.com/dangrossman/daterangepickerA jQuery plugin and Bootstrap component for selecting date ranges via a dropdown menu. Version 3.1.0 supports time selection, localization, predefined ranges, and single date picker mode. It utilizes moment.js for date manipulation and provides extensive configuration options for date validation, visibility control, and event handling.
The Date Range Picker is a component that creates a dropdown menu for selecting date ranges. Key features include:
main.js file using Browserify from within the example folder.<input>) by passing an options object. The plugin uses moment.js for date manipulation and requires jQuery to be present in the environment.You can customize the behavior and appearance of the picker using an options object. Common configuration keys include:
startDate: The initial start date (Moment object or string).endDate: The initial end date (Moment object or string).minDate: The earliest date allowed for selection.maxDate: The latest date allowed for selection.maxSpan: The maximum allowed duration between start and end dates.singleDatePicker: If true, the picker behaves as a single date selector.timePicker: If true, enables time selection.timePicker24Hour: If true, uses 24-hour format for the time picker.timePickerIncrement: The minute increment for the time picker.timePickerSeconds: If true, enables seconds selection.showDropdowns: If true, shows dropdowns for month and year selection.ranges: An object defining predefined date ranges (e.g., { 'Today': [moment(), moment()] }).autoApply: If true, the picker applies the range immediately upon selection.autoUpdateInput: If true, the input element's value is automatically updated.showCustomRangeLabel: If true, shows a 'Custom Range' option in the ranges list.opens: Direction to open the picker ('left' or 'right').drops: Direction to drop the picker ('up' or 'down').The locale option allows you to customize the text and formatting used in the UI. It accepts an object with the following keys:
direction: 'ltr' or 'rtl'.format: The date format string (used by moment.js).separator: The string used to separate start and end dates in the input.applyLabel: Label for the 'Apply' button.cancelLabel: Label for the 'Cancel' button.weekLabel: Label for the week number column.customRangeLabel: Label for the custom range option.daysOfWeek: Array of day names (e.g., ['Sun', 'Mon', ...]).monthNames: Array of month names.firstDay: The index of the first day of the week (0-6).To use the Date Range Picker, call the .daterangepicker() method on a jQuery object. You can pass an options object to configure the picker and an optional callback function that is executed when a date range is selected.
If an instance is already attached to the element, it will be removed and replaced with a new one.
setStartDate and setEndDate methods.The plugin triggers several events on the element it is attached to. You can use standard jQuery .on() to listen for these events:
apply.daterangepicker: Triggered when the user clicks the 'Apply' button.cancel.daterangepicker: Triggered when the user clicks the 'Cancel' button.show.daterangepicker: Triggered when the picker is shown.hide.daterangepicker: Triggered when the picker is hidden.showCalendar.daterangepicker: Triggered when the calendars are shown.hideCalendar.daterangepicker: Triggered when the calendars are hidden.outsideClick.daterangepicker: Triggered when a click occurs outside the picker container.The event handler receives the DateRangePicker instance as the second argument.
You can provide custom logic to determine if a date should be disabled in the picker:
isInvalidDate: A function that returns true if a date is considered invalid.isCustomDate: A function that returns a string (or array of strings) representing CSS classes to be applied to a specific date, or false if no custom styling is needed.You can programmatically control the visibility of the picker using the following methods on the DateRangePicker instance:
toggle(): Toggles the visibility (shows if hidden, hides if shown).show(): Forces the picker to be visible.hide(): Hides the picker. If the selection was incomplete, it reverts to the previous valid dates.Note: hide() will trigger the callback if the date range has changed since the last valid selection.