Here is a guide to adding a calendar date picker to your contact form (e.g. for an event bookings form). simpleContact Pro includes the popular JavaScript library jQuery, so it makes sense to build on that by using a jQuery-based calendar plugin.
The calendar I have chosen is jQuery datePicker by Kelvin Luck. I also use the bgiframe plugin by Brandon Aaron (for Internet Explorer compatibility).
This hack is based on the simple datePicker demo. Other use-cases are shown in the plugin site.
Please note: These plugins are the work of others and I take no credit for them nor do I support them. Bugs and incompatibility reports should be directed to their respective authors.
Kelvin Luck accepts donations via his website. If you find his plugin useful please make a donation.
------------------------------------------
Required files (direct links)
* Date methods for jQuery
* bgiframe plugin (Use jquery.bgiframe.min.js from the download)
* datePicker plugin (download compressed version and rename file to jquery.datePicker.min.js)
* datePicker.css
* calendar.png from simple datePicker demo
------------------------------------------
Instructions
1) Upload plugins
Upload date.js, jquery.bgiframe.min.js and jquery.datePicker.min.js to your sc_admin/js folder.
---------------------
2) Upload CSS
Upload datePicker.css to the same folder as your contact form.
---------------------
3) Upload calendar.png
Upload calendar.png to your sc_admin/res folder.
---------------------
4) Edit screen.css
Please note: These CSS additions are based on the "out of the box" style for the contact form in simpleContact Pro. You may wish to alter them.
Add the following to the bottom of screen.css in the same folder as your contact form:
div.lbl {
padding: 8px 0 0 0;
}
div.lbl, p.err {
clear: left;
}
div.lbl, p.dp-applied {
display: block;
margin: 0 !important;
width: 300px;
}
p.dp-applied {
padding: 3px 0 0 0;
background-position: 0 3px;
}
input.dp-applied {
float: left;
width: 90px !important;
}
a.dp-choose-date {
float: left;
width: 16px;
height: 16px;
padding: 0;
margin: 0 0 0 4px;
display: block;
text-indent: -2000px;
overflow: hidden;
background: url(sc_admin/res/calendar.png) no-repeat;
}
a.dp-choose-date.dp-disabled {
background-position: 0 -20px;
cursor: default;
}
---------------------
5) Add your field
Log into sc_admin and add a field to your contact form. I recommend using a "short" field, because its 10-character limit is ideal for this use.
---------------------
6) Edit forms.js
Open sc_admin/js/forms.js
Delete line 2 and replace it with these lines (where #obj_5 is the id for your chosen field):
if ($("#form_contact").is("form")) {
$("#form_contact").submit( function() { return validateContact(); } );
$("#obj_5").attr("value","dd/mm/yyyy").datePicker();
}
This will pre-fill the field with mm/dd/yyyy and apply a calendar to it.
Please note: It is easy to add a calendar to several fields. Just add more ids to the code:
$("#obj_5,#obj_6,#obj_7").attr("value","dd/mm/yyyy").datePicker();
Next, delete line 22 and replace it with these lines:
if ($(this).val() == '') {
$(this).addClass("err");
if ($(this).hasClass("dp-applied")) {
$(this).next("a").after("<p class=\"err dp-applied\"><em>Please complete this field</em></p>");
} else {
$(this).after("<p class=\"err\"><em>Please complete this field</em></p>");
}
}
This amends the field validation so that error messages appear in the right place.
---------------------
7) Edit contact.php
Finally, all these changes need to be properly linked up to your contact form page.
Open contact.php
Add the following lines before the closing </head> tag in the HTML (on a single line each):
<link rel="stylesheet" type="text/css" media="screen" href="datePicker.css" />
<script type="text/javascript" src="sc_admin/js/date.js"></script>
<!--[if IE]><script type="text/javascript" src="sc_admin/js/jquery.bgiframe.min.js"></script><![endif]-->
<script type="text/javascript" src="sc_admin/js/jquery.datePicker.min.js"></script>
------------------------------------------
If you visit contact.php in your web browser, you should now have a functioning date field with calendar.
