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


Userlevel 7
Badge +1
  • Former Community Manager @ Unbounce
  • 831 replies


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.


🚨
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 and 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="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>

Call this script “jQuery” and set the placement to “Head”.

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" 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> 

👉 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!


35 replies

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

Where is the jQuery Theme Editor mentionned in Step2b ?

Thanks

Userlevel 7
Badge +1

Ah! Good catch, @mtjtdesign!

https://jqueryui.com/themeroller/

Hope that helps 🙂

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®

Userlevel 7
Badge +1

Stoked you got it working!

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

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

Thanks

Userlevel 7
Badge +1

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 👋

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?

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!

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

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!

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

Userlevel 6
Badge +4

Great script! Is there a way to let users select more than 10 years back at the time for selecting year of birth?

When I add the script I can only select 10 years back at the time. Then the date picker reloads and lets me choose 10 more years. However for a 60 year old that might not be the most intuitive way of selecting their year of birth 😉

Any help appreciated!

Userlevel 3

Hey Thomas! 👋

Have you got this working? I would love to help you out on this one. 🙂

Hi all,

I have followed the instructions perfectly but it’s not working for some reason. Is anyone else having trouble?

[quote=“Jess, post:1, topic:11422”]
Hi All i try to follow this instruction and datepicker working in review but after publis date picker can’t running. does anyone experience the same thing ?

Hi Khaerus,

even I am facing the same issue, its working in preview mode but not when published

Userlevel 5
Badge +4

Hello,

I’m having trouble getting this work with a multi-step 2 form (it is related ? i don’t know)
The field is a required one and when i select a date and try to move to the next field, it says “field is required” which is strange as there is numbers inside the field.

I tried to unselect “required field” and it’s working but i’m afraid people will try to leave the filed blank…

Here is the LP: https://mincir-avec.institut-phytotherapie.com/
–> it’s in french
–> it’s the fourth field.

Thanks in advance

I’m also working fine in preview mode but not live - any tips on why? Tried ensuring my jquery ui loading instructions using 1.12.1 version but no luck?

Hey Jess,

Looking to edit the calendar to limited amount of dates. Any suggestions?

Hi Bruna! I’d love some help here - can’t get mine working either. Still shows a single text field after I added in JS for a sticky header and smooth scrolling. Thoughts?

Hi there i don’t know if i’m posting in the right topic, but this is the closer one from my issue, so here is my problem : i have a custom calendar from calendly on my unbounce page and i want to make it a required field, i have some experiences with Html & css, but i’m like a very beginner of javascript, i know it could be simple with a custom javascript! do you have any ideas or tips that could help me ?
Capture d’écran 2020-02-21 à 10.46.46|690x138

Capture d’écran 2020-02-21 à 10.52.59

Has anybody been able to get this to work? I think I have an older version of jquery but I’m not sure how to get a current version and get the calendar picker up and running. Any help would be appreciated 🙂

Can anyone get limited amount of dates to work? I want to only allow customers to pick 7 days from current date?

Userlevel 7
Badge +3

Hey @tanyab,

Look into minDate and maxDate options for your calendar and that would solve your issue.

Best,
Hristian

Need help date picker not working.

https://book.cloudninecare.com/delivery-package-bangalore/

Can anyone please help?

Reply