Unbounce Answers/Next Steps/Tips & Tricks
How to add a calendar "Date Picker" to your 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 the Jquery UI javascript
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:
Step 2(a). Add the Jquery UI Stylesheet (CSS)
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="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/smoothness/jquery-ui.css" />
Call this stylesheet "Jquery UI".
Step 2 (b - optional). Customize the look/feel/theme 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:
...and replace the <link> tag from step 2(a) with a new tag like this:
<link rel="stylesheet" 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":
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>
Step 5. Repeat these steps for any other date fields that you want this for
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):
Selecting a date will populate the form field like so:
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
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?
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:
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!
Worked like a charm. Thanks!
Another glitch I noticed is that people can select days in the past.
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>
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
Looks like it wont appear during preview, only after publishing.
Hi Ben - thanks for the update
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>
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.
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.
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.
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
...and just like that, it works.
Thanks!!
Hoary!