Date Range Picker — Responsive Flatpickr (1 Month Mobile / 2 Months Desktop)

Summary

This article documents the PHP snippet used to customize WPForms’ Date Range Picker so that it shows 1 month on mobile and 2 months on desktop, using Flatpickr’s responsive rules.

This improves usability, reduces scrolling on mobile, and matches UX expectations for travel booking forms.

Context

WPForms Date Picker supports Flatpickr, but it lacks native configuration for responsive month views.

Tulu Travel required:

• One month view on small screens
• Two month view on desktop
• A seamless experience inside Elementor
• No plugin dependencies

To achieve this, the Date Picker is modified via a filter that injects custom Flatpickr settings.

Implementation Details

How it works

• A filter hooks into WPForms date picker settings.
• It outputs custom Flatpickr configuration rules.
• The configuration detects viewport width using JS inside the snippet.

This snippet must be placed in a PHP code snippet plugin or theme’s functions.php.

### Code Snippet (PHP)

/* ------------------------------------------------------------- */
/* TULUTRAVEL — DATE RANGE PICKER: 1 MONTH MOBILE / 2 DESKTOP     */
/* Applies to WPForms Date Range Picker (Flatpickr)               */
/* ------------------------------------------------------------- */

add_filter( 'wpforms_flatpickr_options', function( $options, $form_data, $field ) {

    // Only apply to Tulu Travel form fields (range picker only)
    if ( isset( $field['date_type'] ) && $field['date_type'] === 'date-range' ) {

        // Inject custom JS rules
        $options['onReady'] = "
            function(selectedDates, dateStr, instance) {
                const isMobile = window.matchMedia('(max-width: 768px)').matches;
                instance.set('showMonths', isMobile ? 1 : 2);
            }
        ";

        $options['onChange'] = "
            function(selectedDates, dateStr, instance) {
                const isMobile = window.matchMedia('(max-width: 768px)').matches;
                instance.set('showMonths', isMobile ? 1 : 2);
            }
        ";
    }

    return $options;

}, 10, 3 );

How to Modify

Change breakpoint:

### Code Snippet (JavaScript)

'(max-width: 768px)'

You may change to 600px or 900px depending on UI needs.

Change number of months displayed:

### Code Snippet (JavaScript)

isMobile ? 1 : 2

Examples:

• 1 → single month
• 2 → dual-month calendar
• 3 → quarter-year display (desktop)

Apply only to a specific field/form:

Wrap the condition in:

### Code Snippet (PHP)

if ( $form_data['id'] === 26741 ) { ... }

Best Practices

• Keep PHP snippets in a snippet manager plugin, not the theme.
• Test on real mobile devices, not only in browser inspector.
• Clear site cache + CDN cache (Cloudflare) after updates.
• Ensure no other plugin overrides Flatpickr configuration.

Last Updated

2025-12-03