[heading style=”2″]Datepicker Calendar Widget 10 Second Install[/heading]
Hello [wlm_firstname],
Here is your easiest install method for the datepicker script. It’s literally copy and paste simple! To make the datepicker calendar widget appear in your form, simply copy & paste the provided snippet of code immediately before the </body> tag of your webpage containing the contact form.
Please note! If you hover your mouse over the code, there is an option that will pop up allowing you to easily copy the code. This makes installing your datepicker super easy and fast! 
(code available to Inner Circle members)
[box title=”Sunny Theme” color=”#333333″]
[private_Inner Circle]
[sourcecode language="plain"]
<link type="text/css" href="http://www.amazingsystem.com/datepicker_css/sunny/jquery-ui-1.8.20.custom.css" rel="stylesheet" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script>
jQuery(function() {
jQuery( "#field2" ).datepicker({
dateFormat: "DD, MM d, yy",
numberOfMonths: 2,
showButtonPanel: true
});
});
</script>
[/sourcecode]
[/private_Inner Circle]
[/box]
This script is based on your date of event field being field2. If it’s not, simply update field2 in the above script to whatever the field name is you’re using. Also, if it doesn’t work for you, check to make sure your date field has
[sourcecode language=”plain”] id="field2" [/sourcecode]
like in this snippet
[sourcecode language=”plain”]
<input id="field2" type="text" name="field2" size="40" />[/sourcecode]
Also, you can change the look and feel by downloading pre-made themes or building your own custom theme.
Once you have your custom theme CSS folder uploaded to your hosting accout, simply update that first line of the script with the new URL of the CSS file. This file should end in .css
I’ve taken the liberty and have uploaded several CSS theme files for you to make things easier. Below are several example of the same thing, the only difference being that top line, the CSS url (which is what changes the look and feel).
Questions? Post them at the bottom in the reply box.
[box title=”Blitzer Theme” color=”#333333″]
[private_Inner Circle]
[sourcecode language=”plain”]
<link type="text/css" href="http://www.amazingsystem.com/datepicker_css/blitzer/jquery-ui-1.8.19.custom.css" rel="stylesheet" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script>
jQuery(function() {
jQuery( "#field2" ).datepicker({
dateFormat: "DD, MM d, yy",
numberOfMonths: 2,
showButtonPanel: true
});
});
</script>
[/sourcecode]
[/private_Inner Circle]
[/box]
[box title=”Redmond Theme” color=”#333333″]
[private_Inner Circle]
[sourcecode language=”plain”]
<link type="text/css" href="http://www.amazingsystem.com/datepicker_css/redmond/jquery-ui-1.8.20.custom.css" rel="stylesheet" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script>
jQuery(function() {
jQuery( "#field2" ).datepicker({
dateFormat: "DD, MM d, yy",
numberOfMonths: 2,
showButtonPanel: true
});
});
</script>
[/sourcecode]
[/private_Inner Circle][/box]
[box title=”Smoothness Theme” color=”#333333″]
[private_Inner Circle]
[sourcecode language=”plain”]
<link type="text/css" href="http://www.amazingsystem.com/datepicker_css/smoothness/jquery-ui-1.8.19.custom.css" rel="stylesheet" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script>
jQuery(function() {
jQuery( "#field2" ).datepicker({
dateFormat: "DD, MM d, yy",
numberOfMonths: 2,
showButtonPanel: true
});
});
</script>
[/sourcecode]
[/private_Inner Circle][/box]
[box title=”Flick Theme” color=”#333333″]
[private_Inner Circle]
[sourcecode language=”plain”]
<link type="text/css" href="http://www.amazingsystem.com/datepicker_css/flick/jquery-ui-1.8.20.custom.css" rel="stylesheet" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script>
jQuery(function() {
jQuery( "#field2" ).datepicker({
dateFormat: "DD, MM d, yy",
numberOfMonths: 2,
showButtonPanel: true
});
});
</script>
[/sourcecode]
[/private_Inner Circle]
[/box]
[box title=”Pepper-Grinder Theme” color=”#333333″]
[private_Inner Circle]
[sourcecode language=”plain”]
<link type="text/css" href="http://www.amazingsystem.com/datepicker_css/pepper-grinder/jquery-ui-1.8.20.custom.css" rel="stylesheet" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script>
jQuery(function() {
jQuery( "#field2" ).datepicker({
dateFormat: "DD, MM d, yy",
numberOfMonths: 2,
showButtonPanel: true
});
});
</script>
[/sourcecode]
[/private_Inner Circle]
[/box]
[accordion]
[spoiler title=”Advanced”]
[box title=”Birthdate Datepicker” color=”#333333″]
[private_Inner Circle]
[sourcecode language=”plain”]
<link type="text/css" href="http://www.amazingsystem.com/datepicker_css/blitzer/jquery-ui-1.8.19.custom.css" rel="stylesheet" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function() {
$( "#field2" ).datepicker({
dateFormat: "MM d, yy",
numberOfMonths: 2,
changeYear: true,
yearRange: "1999:2100",
showButtonPanel: true
});
});
</script>
[/sourcecode]
[/private_Inner Circle]
[/box]
[box title=”Spanish Datepicker” color=”#333333″]
[private_Inner Circle]
[sourcecode language=”plain”]
<link type="text/css" href="http://www.amazingsystem.com/datepicker_css/blitzer/jquery-ui-1.8.19.custom.css" rel="stylesheet" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/trunk/ui/i18n/jquery.ui.datepicker-es.js"></script>
<script type="text/javascript">
$(function() {
$.datepicker.setDefaults( $.datepicker.regional[ ‘es’ ] );
$( "#field2" ).datepicker({
dateFormat: "DD, MM d, yy",
numberOfMonths: 2,
showButtonPanel: true
});
});
</script>
[/sourcecode]
[/private_Inner Circle]
[/box]
[box title=”French Datepicker” color=”#333333″]
[private_Inner Circle]
[sourcecode language=”plain”]
<link type="text/css" href="http://www.amazingsystem.com/datepicker_css/blitzer/jquery-ui-1.8.19.custom.css" rel="stylesheet" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/trunk/ui/i18n/jquery.ui.datepicker-fr.js"></script>
<script type="text/javascript">
$(function() {
$.datepicker.setDefaults( $.datepicker.regional[ ‘fr’ ] );
$( "#field2" ).datepicker({
dateFormat: "DD, MM d, yy",
numberOfMonths: 2,
showButtonPanel: true
});
});
</script>
[/sourcecode]
[/private_Inner Circle]
[/box]
[/spoiler]
[/accordion]
For the WordPress users out there, you can avoid some problems and increase page load time by having the JavaScript like this:
sourcecode language=”javascript”
jQuery(document).ready(function(){
jQuery( "#field2" ).datepicker({
dateFormat: "DD, MM d, yy",
numberOfMonths: 2,
showButtonPanel: true,
minDate: 0
});
});
/sourcecode
Thanks Scott!!!
I hate it when Dave comes up with stupid widgets that have no value and are so hard to set-up.
I copied the date picker code into my form, (which took forever – 5 seconds) and now have this silly calendar that pops up when I click on ‘date of event’.
Who would want that for their web site?
OK, all kidding aside… this is AWESOME and sooooooooo easy to implement. Really it only took about 5 seconds.
The only possible snag is to make sure your date code has: id=”field2″ in it or it won’t work. My older forms didn’t have this so it was a simple fix to add this to the code. See Dave’s instructions above about this.
I also love how he gave us several different templates to choose from. Nice. :o)
Thanks Dave… great widget!!!!
Thanks Franc! Please though, direct your thanks to Chris Rose for finding the original script for this! He did all of the hard work initially, making everything line up. We all now can reap the benefits!!!
And a BIG thanks goes to Inner Circle member Scott Lesovic for hooking us up with the new copy and paste functionality of the snippets of code. That truly makes it super easy and fast!!!!