How to Add a Date Picker to a Form Field

If your form asks for a date, a date picker lets visitors choose it from a calendar instead of typing it. This setup uses the jQuery UI date picker.

This is community code, not an official Unbounce feature. Unbounce Support can't troubleshoot custom code. Test it on a published page before relying on it, and work with a developer if you aren't comfortable editing HTML, JavaScript, and CSS.

Step 1. Add jQuery and jQuery UI

In the JavaScripts section, add a script named jQuery with placement set to Head, and paste in the following:

<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>

Step 2. Add the jQuery UI stylesheet

In the Stylesheets section, add a stylesheet named jQuery UI, paste in the following, and click Save Code:

<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/smoothness/jquery-ui.css" />

(Optional) Change the date picker theme

The stylesheet above uses the jQuery UI Smoothness theme. To use a different theme, follow these steps.

1. Open the jQuery UI ThemeRoller.
2. Click Gallery and browse the available themes.

3. Note the name of the theme you want, for example Base.

4. In the jQuery UI stylesheet from step 2, replace smoothness with the theme name and click Save Code. If the name has more than one word, separate the words with hyphens, for example black-tie.

For example, to use the Sunny theme, change the link to the following:

<link rel="stylesheet" type="text/css" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/sunny/jquery-ui.css" />

Make sure the page includes only one jQuery UI stylesheet.

Step 3. Add the date field to your form

Add a Single Line Text Field to your form for the date.

Note the field's ID, shown under the field label. In this example the field is called Start Date and its ID is start_date.

Step 4. Add the date picker script

In the JavaScripts section, add a script named Date Picker with placement set to Head. Paste in the following code and replace start_date with your field's ID. Keep the # in front of the ID, or the script won't work.

<script>
  $(function() {
    $( "#start_date" ).datepicker();
  });
</script>

If your page uses an older version of jQuery UI, update it to version 1.12.1 from the jQuery CDN.

Check the result

Save and preview the page. When you click the date field, a calendar appears, styled with the theme you chose.

Selecting a date fills in the field.

The date picker has many more options, including the format of the date it enters. See the jQuery UI documentation for details.