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.

Setup

First, you’ll need to create your form and add the Date/Time form field to your form and set the format to use Date Picker. If you need any assistance in creating your form, please review this tutorial.

Add a date picker to your form

Adding the code snippet for all date pickers

Next, copy this code snippet to your site. This code snippet will apply a default date to all of your date pickers from WPForms on your site.

/**
 * 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"
        }
    </script>
    <?php
}
add_action( 'wpforms_wp_footer', 'wpf_dev_date_picker_range' );

Adding the code snippet for date pickers inside a specific form

To set a default date for the Datepickers inside a specific form, copy this code snippet to your site.

/**
 * 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">
        window.wpforms_1287 = window.wpforms_1287 || {};
        window.wpforms_1287.datepicker = {
            defaultDate: "today"
        }
    </script>
    <?php
}
add_action( 'wpforms_wp_footer', 'wpf_dev_date_picker_range' );

Our form ID for this tutorial is 1287. Just remember to change this form ID to match your form ID.

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

To set a default date for a specific Datepicker field inside a specific form, copy this code snippet to your site.

/**
 * 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">
        window.wpforms_1287_4 = window.wpforms_1287_4 || {};
        window.wpforms_1287_4.datepicker = {
            defaultDate: "today"
        }
    </script>
    <?php
}
add_action( 'wpforms_wp_footer', 'wpf_dev_date_picker_range' );

Our form ID for this tutorial is 1287 and our specific date picker field ID is 4. Just remember to change this form ID to match your form ID.

And that’s it! You’ve successfully set a default date on the field when the page loads.

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

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 Field Options tab and under the Advanced Options section.

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'
                }
            }
        } );
    </script>
    <?php
}
add_action( 'wpforms_wp_footer', 'wpf_dev_date_picker_range' );

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.