FormWidgets / DateRangePicker / Examples

DateRangePicker Examples

Live examples of the date range picker. Click a field and select start and end dates in the dual calendar view.

View Documentation

1. Basic Date Range

Default date range picker with YYYY-MM-DD format and ' - ' separator.

JavaScript
FormWidgets.init('#dr1', 'DateRangePicker');

2. UK Format with Custom Separator

DD/MM/YYYY format with ' to ' separator and in-range highlighting.

JavaScript
FormWidgets.init('#dr2', 'DateRangePicker', {
    displayFormat: 'DD/MM/YYYY',
    separator: ' to ',
    showInRange: true
});

3. Weekdays Only

Weekends are excluded. The getDateArray() method will only return weekdays.

JavaScript
FormWidgets.init('#dr3', 'DateRangePicker', {
    displayFormat: 'DD/MM/YYYY',
    excludeWeekends: true,
    showInRange: true
});

4. Exclude Holidays

Specific dates (bank holidays) are disabled alongside weekends.

JavaScript
FormWidgets.init('#dr4', 'DateRangePicker', {
    displayFormat: 'DD/MM/YYYY',
    showInRange: true,
    excludeWeekends: true,
    excludeDates: [
        '2025-04-18', // Good Friday
        '2025-04-21', // Easter Monday
        '2025-05-05', // Early May Bank Holiday
        '2025-12-25', // Christmas
        '2025-12-26'  // Boxing Day
    ]
});

5. Mon / Wed / Fri Only

Using excludeDaysOfWeek to restrict to specific days of the week.

JavaScript
FormWidgets.init('#dr5', 'DateRangePicker', {
    displayFormat: 'DD/MM/YYYY',
    excludeDaysOfWeek: [0, 2, 4, 6],  // Exclude Sun, Tue, Thu, Sat
    showInRange: true
});

6. Using getDateArray() — Count Billable Days

Select a range to see how many business days fall within it. Weekends and holidays are automatically excluded from the count.

Select a date range first...
JavaScript
FormWidgets.init('#dr6', 'DateRangePicker', {
    displayFormat: 'DD/MM/YYYY',
    excludeWeekends: true,
    excludeDates: ['2025-12-25', '2025-12-26'],
    showInRange: true
});

function countDays() {
    const widget = FormWidgets.instances.get(document.getElementById('dr6'));
    const dates = widget.getDateArray();
    console.log('Billable days:', dates.length);
    console.log('Dates:', dates);
}

7. Data Attributes

Fully configured via HTML 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">