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的設定不同,會有所差異

<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>

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

分享文章
Chaneswin
Chaneswin

【阿淳】漂流過網路行銷、組織行銷、被創業的光環迷惑過,體驗那些未曾想像的驚奇之後,最終的自由卻是擁有澄澈的雙眼、返璞歸真的看世界,我的冒險不在鎂光燈的絢麗舞台,而在迷宮中。把心路歷程化為故事、把工具筆記在雲端。在瞬息萬變的世界裡,慢慢來。
【阿淳的自由生活工具箱】前身小查的白日夢。從腦中的虛幻到真實世界,這裡記錄著一路上不同階段的想法、課程、工具、實踐、挫折,從此放下權威迷思。如果翻出你需要的工具,歡迎隨喜自取、提問討論 :)

文章: 316

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *