Thread Starter
zotsf
(@zotsf)
I’ve added the standard jQuery datepicker by installing the appropriate jquery ui .js and .css files, adding an identifying ID to the contact form 7 form field, and calling jQuery’s datepicker(); on that ID.
Can you give any more details?
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="scripts/datePicker/date.js"></script>
<script type="text/javascript" src="scripts/datePicker/jquery.datePicker.min-2.1.2.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="scripts/datePicker/dates.css">
Change the above script calls to reference the actual files (search for the date picker on google).
Then give “datePicker” class to text fields in your form:
[text date1 class:datePicker]
Then use this to make the change:
$('.datePicker').datePicker({clickInput:true})
Good luck!
But I wouldn’t call this issue quite resolved… I would like to use this solution as a fallback only.
Contact form 7 should have support for <input type="date" />
Hey thanks for that adaldesign! Just what I needed!
For further reference, at least with the latest jQueryUI, the function should be in lower case:
$('.datePicker').datepicker({clickInput:true})
Thanks!
This worked great for me. Had to make the “datepicker” lowercase as quentinio suggested.
Thanks!
Would you guys please explain where I should change this code?
I can’t get it to work… feel like such a noob. 🙂
You would put something like this in your header:
<script type="text/javascript">
$(document).ready(function() {
$('.datepicker').datepicker({clickInput:true})
});
</script>
and then add:
class:datepicker
to the field you want the datepicker on in your contact7 form.
I know this is somewhat of an older thread, but thought I’d share this nifty plugin for people who want to take the easy way out integrating a datepicker with cf7.
http://ww.wp.xz.cn/extend/plugins/cf7-calendar/
