Unbounce Answers/FAQ/Page Builder - Pro Tips

How can I add a calendar 'date picker' to my form?

Carter Gilchrist
posted this on November 21, 2011 12:47 PM

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.

 

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="http://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:

javascript_add_script.png

 

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="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/smoothness/jquery-ui.css" />

Call this stylesheet "jQuery UI". 

 

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, hop over here and cycle through the various options. When you find the one you like, take note of the URL they provide:

655400-11212011104403pm.png


...and replace the <link> tag from step 2(a) with a new tag like this:

<link rel="stylesheet" type="text/css" href="THE_NEW_URL_YOU_GRABBED_FOR_YOUR_SPECIFIC_THEME" />

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

single_text_field_form.png

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

date_picker_form.png

 

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>

 

 

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):

Screen_shot_2011-11-21_at_12.21.13_PM.png

Selecting a date will populate the form field like so:

Screen_shot_2011-11-21_at_12.21.20_PM.png

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!

 

Comments

User photo
Alan Lefton

This is great except for one problem.  My business does not want to talk to customers over the weekend.  Is there a way to disallow Saturday and Sunday?

September 17, 2012 04:26 PM
User photo
Carter Gilchrist
Unbounce

Hi Michael,

As this is 3rd party code and not built-in functionality, we aren't really able to help troubleshoot or customize too much. However, it looks like you should be able to pass in an option to the "datepicker" method that looks something like this:

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

 If that doesn't work, you might want to dig around a little more in the documentation for jQuery UI's datepicker plugin which is what we're using here. Good luck!

September 17, 2012 05:31 PM
User photo
Alan Lefton

Worked like a charm.  Thanks!

September 17, 2012 05:51 PM
User photo
Alan Lefton

Another glitch I noticed is that people can select days in the past.

October 16, 2012 11:52 AM
User photo
Alan Lefton

I figured out how to do this, so I wanted to share with the community.  The following script will only allow someone to pick 14 days in advance and they cannot pick anything before the current date. If you wish for the calendar to start on the following day, then minDate should be 1.  For yesterday, minDate would be -1.  And so on.

 

<script>
  $(function() {
    $( "#day_of_the_week" ).datepicker({beforeShowDay: $.datepicker.noWeekends,maxDate: 14, minDate: 0});
  });
</script>

October 16, 2012 02:43 PM
User photo
Ben Roberts

I've just tried this method, and can't get the date picker to appear during preview. I've checked and double checked variables etc. I see it has been over a year since the original post - has there been significant changes that would prevent this from working as this tutorial instructs? Thanks! Ben

December 31, 2012 02:20 PM
User photo
Ben Roberts

Looks like it wont appear during preview, only after publishing. 

January 01, 2013 01:23 PM
User photo
Ryan Engley
Unbounce

Hi Ben - thanks for the update

January 08, 2013 05:16 PM
User photo
Avi Blumenstein

We were trying to exclude Sunday only... So, "noWeekends" wouldn't suffice. We used the following code including our own "noSunday" function:

<script>
$(document).ready(function() {
$( "#set_appointment_date" ) .datepicker({beforeShowDay:
noSunday, maxDate: 120, minDate: 2
});

function noSunday(date){
var day = date.getDay();
return [(day > 0), ''];
};
});
</script>

 

March 01, 2013 01:05 AM
User photo
Brian Hayashi

I wanted to check whether others had been getting the Datepicker to work on the unbounce platform.  

I'm getting the same results as Ben Nelson (above): the date picker will not appear during preview, but unlike Ben, it doesn't work after being published. Instead of producing a datepicker, it produces the string '26-02-2013'

Here's a link to the published page:
http://unbouncepages.com/datepicker/

I have failed to get it to work trying both jQuery v1.8.16 and 1.4.2. I have verified all of the links to external script and CSS work properly. There is only one form field and no other UI elements on the page. 

March 06, 2013 11:49 PM
User photo
Ben Roberts

Brian, I had some trouble with the javascript script addition initially, causing the date picker to not appear. I do have other scripts reliant on Javascript though, so bear that in mind. I fixed it by:

- Not using the Unbounce Hosted Script jQuery (1.4.2). Make sure this box is unchecked.

- Adding the following script manually (name: jQuery Placement: head):

<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

- Ensuring this jQuery manual script addition is first manual script addition (above date picker).

 

See if that helps.

March 07, 2013 05:59 AM
User photo
Brian Hayashi

Ben, thanks for your help. I followed all of your instructions. The suggestions didn't work.

I've enclosed some screenshots of the script, the form and the CSS.

If you should see something that is out of place, let me know. 

I use a lot of jQuery. This little thing seems a little wonky to me.

Thanks again. The Unbounce community is awesome.

March 07, 2013 09:23 AM
User photo
Ben Roberts

Hi Brian,

The only difference I can see between your implementation and mine is the style sheet. Probably worth trying mine as a last resort:

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/cupertin..." />

If you notice there's a versioning relationship going on between jQuery and the stylesheet: 1.9.2

March 07, 2013 09:48 AM
User photo
Brian Hayashi

...and just like that, it works.

Thanks!!

March 07, 2013 09:52 AM
User photo
Ben Roberts

Hoary! 

March 07, 2013 10:00 AM
User photo
Andrew Romani

Anyone tried to integrate date + time picker? If so, would appreciate if you could post the code/steps. Thank you.

May 27, 2013 08:56 AM
User photo
Andrew Romani

what I am looking for is how to integrate either:

 

http://trentrichardson.com/examples/timepicker/

 

or

 

http://plugins.jquery.com/simple-dtpicker/

 

into an unbounce landing page. I tried hard but cannot accomplish that..

May 31, 2013 04:33 AM
User photo
Jim Berlin

I have same problem as Brian and Ben - It says invalid for the stylesheet and the date picker will not show up. I have all the same code as Brian and then tried the suggestions from Ben like Brian did - to but it will not work.  Brian - what exactly did you change from your original screen shots of your code?

The one statement from Ben that says the Jquery ui should be first in the code stack. How do I do that? there are already other things in the Head.

 It is baffling that this will not work. thanks for any help you can give.

Jim

November 05, 2013 12:09 PM
User photo
Jim Berlin

Actually got it working - still says invalid and it will not show or work in preview but if I publish it - it works.

What I really need is to add a Date of Birth field that has a day, month, and year dropdowns that will populate as one date when all 3 are selected.

Can anyone suggest how to incorporate this, or the ability to simply just collect a date in date format without having to use any pickers?

Thanks

November 05, 2013 12:23 PM
User photo
Paul Kirchoff

Thanks! It works pretty good.

March 12, 2014 08:23 PM
User photo
Frank Taylor

I implemented this on rent.restinchairs.com and it works great but it seems to be causing a problem with my Salesforce integration because it is not a "date field" but I need to map to a date field in Salesforce.  This is the error I'm getting: 

Request Error: Salesforce received 06/29/2014 which should be sent as a date field. Please update your field mapping configuration.

any ideas? 

May 30, 2014 12:08 PM
User photo
Quinn Omori
Unbounce

Hi Frank - since this work around leverages a text field, you won't be able to pass it into Salesforce as a date field. You could push it into a text field in Salesforce though and then write a custom function in Salesforce that converts the text string to a date string.

June 02, 2014 04:08 PM
User photo
eduardo tobal

Hello,

Why in does the stylesheet appear (invalid) ?

June 04, 2014 08:14 AM
User photo
Johnny Opao
Unbounce

Hey Eduardo

Our CSS validator tries to check if the code is valid on a very low level. We are working to better improve the CSS validator but at times it can misfire and misread your code as being invalid when it operates just fine. If everything works correctly, feel free to ignore the error. 

June 04, 2014 12:16 PM