I currently have a WordPress site installed where users can book a tour of our facility (we are a university). I have used the ContactForm7 plugin to create a form within a page where visitors can enter their contact information and then can use a datepicker field to select the specific date that they want to take their tour on.
My question is (I've searched high and low for a solution to this but to no avail) is there a way that I can disable or block specific dates from being selected in this datepicker field in the form? For example, there are a number of days when tours are not available (i.e. holidays and other days when tour staff are not on campus) so I don't want these dates to be selectable.
Is there a way to do this within the plugin, or is there any other way I can do it, whether it's using a script or through another plugin?
My colleague showed me a site that uses a jQuery/JS datepicker field in their tour booking form (this is NOT a WordPress/ContactForm7 form however) and they are able to block specific dates when tours aren't available, so I'm assuming it should be possible...somehow.
Any help would be greatly appreciated! :)
EDIT:
I found the code below and the website sounds like it'll do exactly what I'm looking for (using a method similar to one of the answers below it looks like) but I can't really figure out how to add it to my site so that it works. I've added it in the header.php file of my theme, and I've set the id to "#DisabledDates" - which is what I've set the datepicker field id to on the form as well...but the dates that I set for the "unavailableDates" are still selectable...any ideas?
<?php if ($post->ID==16) { ?>
<script type="text/javascript">
var unavailableDates = ["9-5-2013", "10-5-2013", "11-5-2013", "12-5-2013", "13-5-2013", "14-5-2013", "15-5-2013", "16-5-2013", "17-5-2013", "18-5-2013", "19-5-2013", "20-5-2013", "21-5-2013", "22-5-2013", "23-5-2013", "24-5-2013"];
jQuery(function($){
$( "#DisabledDates" ).datepicker({
minDate: 5,
beforeShowDay: function(date) {
dmy = date.getDate() + "-" + (date.getMonth() + 1) + "-" + date.getFullYear();
if ($.inArray(dmy, unavailableDates) == -1) {
return [true, ""];
} else {
return [false, "", "Unavailable"];
}
}
});
});
</script>
Here's where I found it (it looks like a plugin that existed to extend CF7 with a datepicker field before the datepicker was added to the plugin...but I'm assuming it should still work similarly?): https://github.com/relu/contact-form-7-datepicker/issues/37