[How to] Add a Calendar Date Picker To Your Form

forms

#1

If your lead gen form requires a date or set of dates, you might be interested in hooking up a “date picker” widget to make the interaction as easy as possible. While this is a feature we will one day incorporate into the core form builder in Unbounce, you can use the following set of steps to get it working today.


:rotating_light: WARNING: YOU ARE ENTERING DEVELOPER TERRITORY :rotating_light:
This is not an official Unbounce feature. This functionality is based entirely on third party code, and has only been tested in limited applications. Since this isn’t a supported Unbounce feature, our support team will be unable to assist if things go awry. So if you are not comfortable with HTML, Javascript and CSS, please consider consulting an experienced developer.


Click Here for Instructions

Step 1: Add jQuery UI

Open up the “Javascripts” panel (click the Javascripts button in the bottom left of the editor) and paste in the following:

<script src="//a.unbounce.com/s/javascripts/jquery/jquery-ui.1.8.16.min.js"></script>

Call this script “jQuery UI” and set the placement to “Head”. It should look like this:

Step 2a: Add the jQuery UI stylesheet

Next, hop over to the “Stylesheets” screen (click the “Stylesheets” button in the bottom left of the editor) and paste in the following:

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

Call this stylesheet “jQuery UI” and click “Save Code”.

Step 2b (Optional): Customize the look of your date picker

There are many different themes available to the jQuery UI, and the above step is making use of the “smoothness” theme. If you wish to use a different theme, follow these steps:

  1. Hop over to the jQuery Theme Editor.
  2. Click “Gallery” and browse through the available themes.
  3. When you find the one you like, make note of the template name (e.g., “Base”, in the image below).
  4. In the “jQuery UI” stylesheet you created in Step 2a above, replace the word “smoothness” in your tag with the template name of the theme you wish to use and click “Save Code”. If the template name contains more than one word, add a hyphen (-) between each word (e.g., “black-tie”).

For example if you wanted to use the jQuery “Sunny” theme you would change the link to:
<link rel="stylesheet" type="text/css" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/sunny/jquery-ui.css" />

There should only be ONE jQuery UI stylesheet being included on your page now.

Step 3: Add the date field to your form

You may already have this in your form, but the important part is finding out what the field is called. You’ll want to use just a “Single-line Text Field”:

Design%20Your%20Form%20Single%20Text%20Field

In this example I’m calling it “Start Date”. You’ll notice right under the Field Label input box, there’s some text “start_date”. This is the ID of your field, remember it for the next step

Step 4: Add the ‘date picker’ JavaScript code

Open up the Scripts dialogue again. Add a new script, call it “Date Picker” and set the placement to “Head”. Paste in the following code, and replace “start_date” with the form field ID that you took note of in the last step:

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

:point_right: Make sure the “#” symbol is included in front of the form field ID - otherwise, this script won’t work!

If you’re using an outdated version of jQuery UI, you will need to use the updated version (1.12.1). You can download this from the jQuery CDN page.

That’s it, you’re all done!

You can save and preview your page now, and clicking on the “Start Date” input field should show you something like this (depending on which theme you chose):

13%20PM

Selecting a date will populate the form field like so:

20%20PM


Remember to look at all the options of using this component if you want to get your hands dirty customizing it. There really are a ton of options, including changing the format of the date string that populates your form field. Let us know how it worked out for you!


Calendar form option
The Ultimate List of Unbounce Tips, Scripts & Hacks
Date of Birth Field
#2

Hey there ! great addition just what I was looking for !

Where is the jQuery Theme Editor mentionned in Step2b ?

Thanks


#3

Ah! Good catch, @mtjtdesign!

https://jqueryui.com/themeroller/

Hope that helps :slight_smile:


#4

Talk about reactive team ! wow !

Yeah so this is where I was but wasn’t too sure about it.

Integrated the code and it works (yay!) now I have to make it look nice®


#5

Stoked you got it working!


#6

Been doing the Gallery thing and went even further as to customizing colors and fonts, I know crazy me :slight_smile:

How do I put the downloaded jquery thingy on my Unbounce page ?

Thanks


#7

Bear with me I’m not as gifted with instructions as our support team, but, it should be pretty straightforward:

So when you select a theme from that gallery, you can simply replace the word ‘smoothness’ from this script in Step 2:
<link rel="stylesheet" type="text/css" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/smoothness/jquery-ui.css" />

For example, you would change ‘smoothness’ to ‘redmond’, which is another option in that gallery.

I believe that’s all there is to it. Let me know if you get stuck, I’ll be here for another hour :wave:


#8

G’day all, how’s it going?

I’m having a bit of trouble getting my calendar picker to work within the lightbox that I’ve created.
Inside the Javascript section of Lightbox 2, I’ve got 2 scripts running.
One for the jQuery UI bundled with the actual script like so:
image

And one for the jQuery Library here:
image

However whenever I try to pick a date from the Calendar picker form field, it’s still working as a single text line field.

What have I missed in the process of installing this?


#9

Hi All!

Hoping someone has a solution for me here. I am looking for a modified date picker that is better optimized for Date of Birth. With this date picker listed above it is very difficult to go month by month for our users. Being insurance we’re talking an obviously older demo so i cant imagine going month by month for someone in their 40s.

We want to make the data entry uniform and minimize user error so the single text line isnt really the best option either.

Thank you!


#10

** sorry, it is difficult to go year to year as it is set up by months… That should make more sense now.


#11

Where can I find information on these settings?
We are in NZ so would like to change the date field to day/month instead of month/day if possible… Thanks!


#12

I installed the scripts correctly but the calendar only shows up in “preview” mode and not the published website. Is there an extra step?