DateRangePicker
fw-daterange
Select a start and end date using dual side-by-side calendars. Supports in-range highlighting, date exclusions, and a getDateArray() method to retrieve all dates in the range.
Usage
HTML (Auto-init)
HTML
<input type="text" class="fw-daterange" id="myRange">
<script>
FormWidgets.autoInit();
</script>HTML with Data Attributes
HTML
<input type="text" class="fw-daterange"
data-separator=" to "
data-show-in-range="true"
data-exclude-weekends="true"
data-show-pattern="true">JavaScript Initialization
JavaScript
FormWidgets.init('#myRange', 'DateRangePicker', {
displayFormat: 'DD/MM/YYYY',
separator: ' to ',
showInRange: true,
excludeWeekends: true
});Options
| Option | Type | Default | Description |
|---|---|---|---|
| format | string | 'YYYY-MM-DD' | Internal date storage format. |
| displayFormat | string | 'YYYY-MM-DD' | Display format shown to the user for each date in the range. |
| separator | string | ' - ' | Text separating the start and end dates in the field. Example: ' to ' shows 01/01/2025 to 31/01/2025. |
| showInRange | boolean | false | When true, dates between the start and end are visually highlighted in the calendar. |
| excludeWeekends | boolean | false | Disables Saturdays and Sundays. |
| excludeDates | array | [] | Array of specific dates to disable (ISO format strings). |
| excludeDaysOfWeek | array | [] | Array of day numbers to disable [0=Sun … 6=Sat]. |
| showPattern | boolean | true | Shows the expected format as a placeholder, e.g. DD/MM/YYYY - DD/MM/YYYY. |
| icon | string | 'dateRange' | Name of the SVG icon to use from the internal icon set. |
| required | boolean | false | Marks the field as required. |
Data Attributes
| Data Attribute | Equivalent Option | Example |
|---|---|---|
| data-display-format | displayFormat | data-display-format="DD/MM/YYYY" |
| data-separator | separator | data-separator=" to " |
| data-show-in-range | showInRange | data-show-in-range="true" |
| data-exclude-weekends | excludeWeekends | data-exclude-weekends="true" |
| data-exclude-dates | excludeDates | data-exclude-dates='["2025-12-25"]' |
| data-show-pattern | showPattern | data-show-pattern="true" |
Methods
widget.getDateArray()
Returns an array of all dates within the selected range, excluding any disabled dates (weekends, specific exclusions, day-of-week exclusions). Useful for calculating billable days, booking totals, etc.
Returns:
string[] — Array of ISO date strings (YYYY-MM-DD) for each included date.JavaScript
const widget = FormWidgets.instances.get(document.getElementById('vacation'));
// Get all selectable dates in the range
const dates = widget.getDateArray();
console.log(dates);
// ['2025-06-02', '2025-06-03', '2025-06-04', ...]
// Calculate billable days excluding weekends
const billable = dates.length;
console.log('Billable days:', billable);Keyboard Navigation
Enter / ↓Open the date range picker
EscClose the picker
← →Navigate by day in the active calendar
↑ ↓Navigate by week in the active calendar
EnterSelect start or end date (first click = start, second click = end)
TabNavigate through both calendars' controls
Features
Dual Calendar
Side-by-side calendars for easy range selection.
In-Range Highlight
Visual highlighting of all dates between start and end.
Date Exclusions
Exclude weekends, holidays, or specific days of the week.
getDateArray()
Retrieve all included dates in the range as an array.