jQuery UI Datepicker - Exclude dates WordPress
- SOLVED
Hello, how are you? I've created a booking form with Gravity Forms and Woocommerce for my site . You can see the form here: http://www.staging2.buenosairescitypass.com/product/essentials-pass/
At the beginning you can see there's a datepicker. I need that this calendar:
Show dates only from the future (currently it let's you choose past dates)
Show dates 72hs from today up to 4 months in advance
Exclude some dates. From December 17th to 1th of January
This is a jQuery UI Datepicker. From Gravity Forms support they told me that "custom JS would be placed at the theme level"
Here is more info about it:
http://api.jqueryui.com/datepicker/
http://jqueryui.com/datepicker/#min-max
I need that someone gives me the code I should copy and paste and tell me where I should do it.
Thanks!
Answers (3)
timDesain Nanang answers:
You need to disable certain days dynamically, so the script will be working properly at the next year.
for safety, you need to disable Jan, 1th at this year and next year.
put this code into theme's functions.php:
add_filter('wp_footer', 'wpq_footer_date');
function wpq_footer_date() {
?>
<script type="text/javascript">
var now = new Date(), Y = now.getFullYear(), Yx = (now.getFullYear())+1;
//disable certain days automatically
var disabledDays = ["1-1-"+Y, "1-1-"+Yx]; //Jan, 1th this year and next year
for (d = 17; d <= 31; d++) {
disabledDays.push("12-"+d+"-"+Y);
}
function noEndYear(date) {
var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();
for (i = 0; i < disabledDays.length; i++) {
if($.inArray((m+1) + '-' + d + '-' + y,disabledDays) != -1 || new Date() > date) {
return [false];
}
}
return [true];
}
jQuery(document).ready(function($) {
jQuery( "#datepicker" ).datepicker({
minDate: +3, //3 days = 72hrs
maxDate: "+4M", //4 months
beforeShowDay: noEndYear
});
});
</script>
<?php
}
matiasi comments:
Thanks, I tried pasting it on a child theme functions.php but nothing happened. I pasted it at the end of the file.
timDesain Nanang comments:
Hi, I have updated the code,
Please try again:
add_filter('wp_footer', 'wpq_footer_date');
function wpq_footer_date() {
?>
<script type="text/javascript">
var now = new Date(), Y = now.getFullYear(), Yx = (now.getFullYear())+1;
//disable certain days automatically
var disabledDays = ["1-1-"+Y, "1-1-"+Yx]; //Jan, 1th this year and next year
for (d = 17; d <= 31; d++) {
disabledDays.push("12-"+d+"-"+Y);
}
function noEndYear(date) {
var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();
for (i = 0; i < disabledDays.length; i++) {
if($.inArray((m+1) + '-' + d + '-' + y,disabledDays) != -1 || new Date() > date) {
return [false];
}
}
return [true];
}
jQuery(document).ready(function($) {
jQuery( "#input_1_29" ).datepicker({
minDate: +3, //3 days = 72hrs
maxDate: "+4M", //4 months
beforeShowDay: noEndYear
});
});
</script>
<?php
}
timDesain Nanang comments:
Hi Sir,
I have checked your website, and the datepicker is working properly now.
http://i.imgur.com/uWPnZnd.png
http://i.imgur.com/H6Fl9Gk.png
Arnav Joy answers:
You will need to add some custom script to your header or footer:
<script>
jQuery.noConflict();
jQuery(document).ready(function($) {
$( "#input_1_29" ).datepicker({ buttonImage: 'http://www.staging2.buenosairescitypass.com/wp-content/plugins/gravityforms/images/calendar.png', minDate: '+3d' , maxDate: "+548"});
});
</script>
Arnav Joy comments:
to hide specific dates you can try it:-
<script>
jQuery.noConflict();
var unavailableDates = ["17-12-2014", "18-12-2014", "19-12-2014"];
function unavailable(date) {
dmy = date.getDate() + "-" + (date.getMonth() + 1) + "-" + date.getFullYear();
if ($.inArray(dmy, unavailableDates) == -1) {
return [true, ""];
} else {
return [false, "", "Unavailable"];
}
}
jQuery(document).ready(function($) {
$( "#input_1_29" ).datepicker(
{
buttonImage: 'http://www.staging2.buenosairescitypass.com/wp-content/plugins/gravityforms/images/calendar.png',
minDate: '+3d' ,
maxDate: "+548",
beforeShowDay: unavailable
}
);
});
</script>
matiasi comments:
Thanks, could you be more specific? In which file should I paste this?
Ian Lincicome answers:
The best way I have seen it done is like this:
var invalid = { "period": [ { "from": "12/17/2014", "to": "1/2/2014" } ] };
function period(date){
var i, num, period, start, startArray, end, endArray;
num = invalid.period.length;
for(i=0;i<num;i++){
period = invalid.period[i];
startArray = period.from.split('/');
start = new Date(startArray[2], (startArray[0] - 1), startArray[1]);
endArray = period.to.split('/');
end = new Date(endArray[2], (endArray[0] - 1), endArray[1]);
if(date>=start && date<=end){
return true;
}
}
return false;
}
$('input').datepicker({ minDate: -2, maxDate: "+4M",
beforeShowDay: function(date){
if(period(date)){
return [false];
}
return [true];
}
});
I tested this on JSfiddle. See it work at:
http://jsfiddle.net/DBkhC/38/
Add it wherever the datepicker code is, I believe it is in a file named datepicker.js within the gravity forms plugin folder somewhere. It looks like you may have solved it, but let me know if you still need help.
matiasi comments:
Thanks, could you be more specific? In which file should I paste this?