How to Customize the WPForms Date Picker with Code Snippets

Many WPForms users want to customize the behavior of their date picker fields, such as disabling specific date ranges, showing week numbers, or setting a default date. A common approach is to use custom JavaScript and PHP code snippets. However, users often encounter issues where these snippets don't work as expected or conflict with each other. This guide explains the common reasons for these problems and provides solutions.

Why Custom Date Picker Code Might Not Work

Based on community reports, the most frequent reasons for date picker customization failures are:

• Incorrect Field Targeting: Code snippets often require the specific form ID and field ID to work correctly. Using placeholder IDs like '999' will prevent the code from running on your live form.
• Conflicting Scripts: Adding multiple independent snippets to modify the same date picker can cause conflicts, where the last script loaded overrides the settings of the first.
• Improper Date Format: The Flatpickr library used by WPForms requires dates to be in a specific format (e.g., "YYYY-MM-DD"). Using a different format, like "2023-28-6", will cause the disable function to fail.
• Action Hook Priority: The wpforms_wp_footer_end action hook must be called with the correct priority to ensure the JavaScript is output after the core WPForms scripts are loaded.

Common Solutions and Code Examples

1. Disabling a Range of Dates and Specific Days

A user wanted to disable a long date range and weekend days but found that two separate snippets conflicted. The solution is to combine all the logic into a single configuration. Here is an example that disables a date range and also every Saturday and Sunday:

function wpf_custom_date_picker() {
    ?>
    <script type="text/javascript">
        window.wpforms_datepicker = {
            disableMobile: false,
            disable: [
                // Disable a date range
                {
                    from: "2023-06-28",
                    to: "2023-07-31"
                },
                // Disable weekends (Sunday: 0, Saturday: 6)
                function(date) {
                    return (date.getDay() === 0 || date.getDay() === 6);
                }
            ]
        }
    </script>
    <?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_custom_date_picker', 14 );

Key Takeaway: Instead of using two snippets, define all your disable rules within a single window.wpforms_datepicker configuration object.

2. Correctly Formatting Dates

A user's snippet failed because the date format was incorrect. The Flatpickr library requires the ISO 8601 format: YYYY-MM-DD.

Incorrect: from: "2023-6-28" (Missing leading zero)
Correct: from: "2023-06-28"

3. Setting a Default Date

To pre-select today's date in a date picker field, you can use the following snippet. Replace 123 with your form ID and 4 with your field ID.

function wpf_default_date() {
    ?>
    <script type="text/javascript">
        jQuery(document).ready(function($) {
            // Set default date for form ID 123, field ID 4
            $('#wpforms-123-field-4').flatpickr({
                defaultDate: 'today'
            });
        });
    </script>
    <?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_default_date', 10 );

Troubleshooting Steps

1. Check for Errors: Open your browser's console (F12) to check for any JavaScript errors that might prevent your code from executing.
2. Verify IDs: Double-check that the form ID and field ID in your code snippet match the actual IDs on your form. You can often find these by inspecting the HTML of your form.
3. Use a Code Snippets Plugin: Ensure your custom code is being executed on the correct pages by using a plugin like Code Snippets.
4. Clear Caches: If you use a caching plugin, clear its cache after adding or modifying a code snippet to ensure the latest version is served to users.

Customizing the WPForms date picker is powerful but requires attention to detail. By combining configurations, using the correct date format, and properly targeting your forms, you can achieve the precise functionality you need.