FormWidgets / DatePicker / Examples

DatePicker Examples

Live interactive examples showing different DatePicker configurations. Click any field to open the calendar picker.

View Documentation

1. Basic DatePicker

Default configuration with YYYY-MM-DD format and pattern placeholder.

JavaScript
FormWidgets.init('#dp1', 'DatePicker');

2. UK Date Format (DD/MM/YYYY)

Display format set to DD/MM/YYYY — common for UK and European applications.

JavaScript
FormWidgets.init('#dp2', 'DatePicker', {
    displayFormat: 'DD/MM/YYYY'
});

3. US Date Format (MM/DD/YYYY)

Display format set to MM/DD/YYYY for US-style date entry.

JavaScript
FormWidgets.init('#dp3', 'DatePicker', {
    displayFormat: 'MM/DD/YYYY'
});

4. Min / Max Date Constraints

Dates outside the allowed range are disabled and cannot be selected. Try navigating to a previous or future month.

JavaScript
FormWidgets.init('#dp4', 'DatePicker', {
    minDate: '2025-01-01',
    maxDate: '2025-12-31',
    displayFormat: 'DD/MM/YYYY'
});

5. Exclude Weekends

Saturdays and Sundays are greyed out and cannot be selected. Ideal for booking business days.

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

6. Exclude Specific Dates (Holidays)

Specific dates such as bank holidays are disabled individually.

JavaScript
FormWidgets.init('#dp6', 'DatePicker', {
    displayFormat: 'DD/MM/YYYY',
    excludeDates: [
        '2025-12-25',  // Christmas Day
        '2025-12-26',  // Boxing Day
        '2026-01-01',  // New Year's Day
        '2025-04-18',  // Good Friday
        '2025-04-21'   // Easter Monday
    ]
});

7. Only Mon / Wed / Fri

Using excludeDaysOfWeek to allow only specific days of the week.

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

8. Without Pattern Placeholder

The pattern placeholder can be disabled with showPattern: false.

JavaScript
FormWidgets.init('#dp8', 'DatePicker', {
    displayFormat: 'DD/MM/YYYY',
    showPattern: false
    // Your own placeholder attribute is preserved
});

9. Combined: Weekdays Only + Min/Max + Holidays Excluded

Multiple constraints combined for a real-world booking field.

JavaScript
FormWidgets.init('#dp9', 'DatePicker', {
    displayFormat: 'DD/MM/YYYY',
    minDate: '2025-01-01',
    maxDate: '2026-12-31',
    excludeWeekends: true,
    excludeDates: ['2025-12-25', '2025-12-26', '2026-01-01']
});

10. Using Data Attributes (No JavaScript)

Configure the widget entirely through HTML data attributes with FormWidgets.autoInit().

HTML
<input type="text" class="fw-datepicker"
       data-display-format="DD/MM/YYYY"
       data-exclude-weekends="true"
       data-show-pattern="true">

<script>
  FormWidgets.autoInit();
</script>

11. Reading the Selected Value

Select a date and click the button to read its value via JavaScript.

Selected value will appear here...
JavaScript
FormWidgets.init('#dp11', 'DatePicker', {
    displayFormat: 'DD/MM/YYYY'
});

function readDate() {
    const value = document.getElementById('dp11').value;
    console.log('Selected date:', value);
}