How to Set a Default Date for Your Date Picker Form Field

Overview

Would you like to have your date picker load with a default date? When using the Date Picker format on the Date/Time form field, you can easily select a date from a popup window. But did you know you can also easily set a default date for this field that starts with today’s date? In this tutorial, we’ll show you how to achieve this.

It’s important to remember that if you are using a code snippet to limit the Date Picker field, any form builder options for limiting should be turned off.

Setup

First, you’ll need to create your form and add the Date/Time form field to your form. On the Advanced tab, make sure you’ve selected Date Picker for the Type.

Add a date picker to your form

If you need any assistance in creating your form, please review this tutorial.

Please note the example snippets in this tutorial are specifically for single use examples. If you’re planning on using several of these code snippets at once you’ll need to make sure each function name is the unique or you can group them all into one function.

With any of the snippets, you’ll need to copy and paste them to your site. If you need help in how to add snippets to your site, please review this tutorial.

Adding the code snippet for all date pickers

/**
 * Set today's date as default date for all date pickers.
 *
 * @link https://wpforms.com/developers/how-to-set-a-default-date-for-your-date-picker-form-field/
 */

function wpf_dev_date_picker_range() {
    ?>
    <script type="text/javascript">
        window.wpforms_datepicker = {
            defaultDate: "today",
	    disableMobile: "true"
        }
    </script>
    <?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_date_picker_range', 30 );

Adding the code snippet for date pickers inside a specific form

To set a default date for the Datepickers inside a specific form, you can use this snippet but change the _1287 to match your own form ID. If you need any help in how to find your form ID, please check out this tutorial.

/**
 * Set today's date as default date for all date pickers inside the specific form.
 *
 * @link https://wpforms.com/developers/how-to-set-a-default-date-for-your-date-picker-form-field/
 */

function wpf_dev_date_picker_range() {
    ?>
    <script type="text/javascript">
        // Run this on all date pickers inside the form ID 1287
        window.wpforms_1287 = window.wpforms_1287 || {};
        window.wpforms_1287.datepicker = {
            defaultDate: "today",
	    disableMobile: "true"
        }
    </script>
    <?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_date_picker_range', 30 );

Adding the code snippet for a specific date picker field inside a specific form

To set a default date for a specific field inside a specific form, you can use this snippet but change the _1287 to match your own form ID and update the _4 to match the field ID. If you need any help in how to find your form ID, please check out this tutorial.

/**
 * Set today's date as default date for a specific date picker inside a specific form.
 *
 * @link https://wpforms.com/developers/how-to-set-a-default-date-for-your-date-picker-form-field/
 */

function wpf_dev_date_picker_range() {
    ?>
    <script type="text/javascript">
        // Run this on the date field ID 4 inside the form ID 1287
        window.wpforms_1287_4 = window.wpforms_1287_4 || {};
        window.wpforms_1287_4.datepicker = {
            defaultDate: "today",
	    disableMobile: "true"
        }
    </script>
    <?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_date_picker_range', 30 );

And that’s all you need to set a default date. When the page loads, the Date field will automatically load the current date.

The default date is now set on the date picker field when the form loads.

Would you like to also learn how to set a range of dates or multiple dates that can be selected from your date picker? Check out our article on How to Allow Date Range or Multiple Dates in Date Picker.

Action Reference: wpforms_wp_footer_end

FAQ

Can I just set a default date by a custom CSS class name?

A: Absolutely! First make sure you’ve added a class name on your Date/Time form field from the Advanced tab.

In our example, the CSS class name we’re using is customdatecode.

Add the CSS class name to identify where this code should be applied

Once you’ve saved the form CSS class name, add this code snippet to your site.

/**
 * Set today's date as default date for all date pickers from a CSS class name.
 *
 * @link https://wpforms.com/developers/how-to-set-a-default-date-for-your-date-picker-form-field/
 */

function wpf_dev_date_picker_range() {
    ?>
    <script type="text/javascript">
        jQuery( '.customdatecode' ).each( function () {
            var form   = jQuery( this ).closest( '.wpforms-form' ),
                formID  = form.data( 'formid' ),
                fieldID = jQuery(this).data('field-id' );
            window['wpforms_' + formID + '_' + fieldID] = {
                datepicker:  {
                    defaultDate: 'today',
		    disableMobile: 'true'
                }
            }
        } );
    </script>
    <?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_date_picker_range', 30 );

Now on any form that has a date picker inside of it with that CSS class name it will automatically set today’s date as the date for that field.

Q: Will this work on mobile devices?

A: Mobile devices all vary with the OS default functionality so the date will not be filled in automatically when viewing from mobile devices.