Skip to content

jQuery的datepicker限定週末或特定日

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

因為我用來配合Contact Form 7datepicker

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

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

<script>
jQuery(function () {

// 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
});

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>

直接貼在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 }

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

<script>
function DisableWeekDays(date) {

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>

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

© 2015, Chaneswin. 如發現留有早期非原創作品可以留言回報喔~感謝您的幫忙 🙂


文章如有幫助,先按讚,再分享,歡迎贊助哦!