jQuery的datepicker限定週末或特定日

Spread the love

【聲明】本站任何文章都可能有聯盟行銷連結，當你透過文章內的連結購買產品，我可能獲得分潤，這不會增加你任何成本，並且我分享的都是自己實際使用過的資訊，更多細節請點這裡。 Disclosure: Any post on this site may contain affiliate links, meaning I get commission if you decide to make a purchase through my links, at no cost to you.

重點在於jQuery(‘#appt_date_1’)裡面的id要改掉，

因為我用來配合Contact Form 7的datepicker，

所以改成jQuery(‘input[name=”your-date”]’).datepicker

裡面的your-date 按照每個人在Contact Form 7的設定不同，會有所差異

// 0 = monday, 1 = tuesday, 2 = wednesday, 3 = thursday,
// 4=friday, 5 = saturday, 6=sunday

var daysToDisable = [3, 4, 5];

jQuery(‘#appt_date_1’).datepicker({
beforeShowDay: disableSpecificWeekDays
});

直接貼在Contact Form 就好，

如果要嵌入WordPress裡面，就像下面這樣使用：

add_action( ‘wp_footer’, ‘add_js_to_wp_footer’ );
function add_js_to_wp_footer(){ ?>
<script>jQuery(function(){var daysToDisable=[1,2,3,4,5];jQuery(‘input[name=”your-date”]’).datepicker({beforeShowDay:disableSpecificWeekDays});function disableSpecificWeekDays(date){var day=date.getDay();for(i=0;i<daysToDisable.length;i++){if(jQuery.inArray(day,daysToDisable)!=-1){return[false];}}
return[true];}});</script>
<?php }

底下附上另外一段我沒有使用的語法，針對週末使用

var weekenddate = jQuery.datepicker.noWeekends(date);

// In order to disable weekdays, we will invert the value returned by noWeekends functions.
// noWeekends return an array with the first element being true/false.. So we will invert the first element

var disableweek = [!weekenddate[0]];
return disableweek;
}

jQuery(function() {
jQuery( “#datepicker” ).datepicker({
beforeShowDay: DisableWeekDays
});
});
</script>

參考資料：https://www.spiceforms.com/blog/how-to-disable-dates-in-jquery-datepicker-a-short-guide/