### [How To Change the Position of the Date Picker Popup](https://wpforms.com/developers/how-to-change-the-position-of-the-date-picker-popup/)

**Published:** November 26, 2021
**Author:** Editorial Team

**Excerpt:** This tutorial will walk you through the steps on how to easily change the placement of the Date Picker popup to appear above the form field rather than below. 

**Content:**

## Introduction

Would you like to customize the position of the **Date Picker** field popup using a simple snippet? By default, the popup dynamically adjusts based on the field’s placement and the page’s scroll bar. This tutorial will guide you through the process, offering step-by-step instructions on how to set the position of the popup permanently using a snippet.

## Creating the form

Let’s kick off by crafting our form and incorporating two date picker form fields.

After adding the **Date** form fields, navigate to the **Advanced** tab and opt for **Date Picker** from the **Date** dropdown.

![create your form and add at least one date picker field](https://wpforms.com/wp-content/uploads/2021/11/wpforms-date-picker-selection.jpg)

If you need any help in creating your form, [please review this documentation](https://wpforms.com/docs/creating-first-form/ "How to Create Your First Form").

## 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](https://wpforms.com/developers/how-to-add-custom-php-or-javascript-for-wpforms/ "How to Add Custom PHP or JavaScript for WPForms").

#### For all forms

Use this snippet for all WPForms date pickers on your site.

```

/**
 * 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() {
    ?>

**Categories:** Tutorials

**Tags:** Date Time Field, Javascript, JS

---