How To Change the Position of the Date Picker Popup

Introduction

Would you like to change the position of the Date Picker popup? By default, this popup will always appear below the form field, however, with a small snippet, you can easily change this popup to appear above the field. In this tutorial, we’re going to walk you through each step on how to position this popup above the form field.

Creating the form

We’ll begin by creating our form and adding our form fields which will include two date pickers.

Once you’ve added the Date form fields, just click on the Advanced tab and select Date Picker from the Date dropdown.

create your form and add at least one date picker field

If you need any help in creating your form, please review this documentation.

Adding the snippet

Next, you’ll need to add a small code snippet to your site to change the position of the popup. If you’re not sure how to add snippets to your site, please check out this tutorial.

/**
 * Change the position of the date picker popup
 *
 * @link https://wpforms.com/developers/how-to-change-the-position-of-the-date-picker-popup/
 */
  
function wpf_move_datepicker_placement() {
    ?>

    <script type="text/javascript">

        var d = new Date();
        window.wpforms_datepicker = {

            position: "above"
        }

    </script>

    <?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_move_datepicker_placement', 10 );

To target a specific form and field ID, you’d use this snippet.

/**
 * Change the position of the date picker popup for a specific form and field ID
 *
 * @link https://wpforms.com/developers/how-to-change-the-position-of-the-date-picker-popup/
 */
  
function wpf_move_datepicker_placement() {
    ?>

    <script type="text/javascript">

        var d = new Date();
        window.wpforms_21_1 = window.wpforms_21_1 || {};
        window.wpforms_21_1.datepicker = {

            position: "above"
        }

    </script>

    <?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_move_datepicker_placement', 10 );

In the snippet above, we’re targeting the form ID 21 and inside that form, we’re only targeting the field ID 1.

If you need help finding your form and field IDs, please see this tutorial.

And that’s all you need to change the position of the date picker popup. Would you like to customize the date picker field further? Take a look at our tutorial on How to Allow Date Range or Multiple Dates in Date Picker.

Action Reference: wpforms_wp_footer_end