前提

該当サイト

wordpressのエレメンターにて、MWformでdatapickerカレンダーに祝日（あるいは特定の日付）をしたいのですが上手くいきません。
お願いします。助けてください。

実現したいこと

2023/02/11　2023/02/23が祝日の為、最終的に該当のtdタグにクラス名を着けたい

該当のソースコード

jQuery
1jQuery(function() {
2  var holidays = ['20230211', '20230223'];
3jQuery('#datepicker').datepicker({
4    beforeShowDay: function (date) {
5        var ymd = date.getFullYear() + ('0' + (date.getMonth() + 1)).slice(-2) + ('0' +  date.getDate()).slice(-2);
6        if (holidays.indexOf(ymd) != -1) {
7            // 祝日
8            return [true, 'ui-state-disabled2'];
9        } else if (date.getDay() == 0) {
10            // 日曜日
11            return [false, 'ui-state-disabled3'];
12        } else {
13             // 平日
14            return [true, ''];
15        }
16    }
17});
18  
19});

MWフォーム
1お名前
2
3[mwform_text name="name" placeholder="name"]
4
5ふりがな
6
7[mwform_text name="name_kana" placeholder="ふりがな"]
8
9電話番号
10
11[mwform_text name="tel" placeholder="電話番号"]
12
13メールアドレス
14
15[mwform_text name="email"]
16
17メールアドレス確認
18
19[mwform_text name="email_check" ]
20
21郵便番号
22
23[mwform_text name="pcode"]
24
25ご住所
26
27[mwform_text name="adress"]
28
29お問い合わせ内容
30
31[mwform_radio name="select_form" id="select_form" class="select_form" children="お問合せ,体験希望" value="お問合せ"]
32
33体験したい店舗を選択してください
34
35[mwform_radio name="select_shop" id="select_shop" class="select_shop" children="納屋橋キック1号店" value=""]
36
37希望日時
38※体験の対応時間は下記の時間内でご入力下さい。
39平日　18:00～22:00
40土曜　15:00～18:00
41祝日　15:00～20:00
42日曜日は定休日となります。
43
44[mwform_datepicker name="days" id="datepicker" size="30" placeholder="ご希望の日にちを選択してください"]
45[mwform_select class="select1" name="dateserect" id="希望日時" children="ご希望のお時間帯を選択してください,１５：００～１６：００,１６：００～１７：００,１７：００～１８：００,１８：００～１９：００,１９：００～２０：００,２０：００～２１：００,２１：００～２２：００" value=""]
46[mwform_select class="heijitu" name="dateserect" id="希望日時" children="ご希望のお時間帯を選択してください,１８：００～１９：００,１９：００～２０：００,２０：００～２１：００,２１：００～２２：００" value=""]
47[mwform_select class="doyou" name="dateserect" id="希望日時" children="ご希望のお時間帯を選択してください,１５：００～１６：００,１６：００～１７：００,１７：００～１８：００" value=""]
48
49お問合せ詳細
50
51[mwform_textarea name="contents"]
52[mwform_backButton value="戻る"]
53[mwform_submitButton name="submit" confirm_value="確認する" submit_value="送信する "]
54
55### 補足情報
56日曜日を非表示と土曜日の取得はできました。
57
58```jQuery
59// 	日曜日を非表示
60 jQuery(function(){ jQuery('#datepicker').datepicker(); jQuery('#datepicker').datepicker('option','beforeShowDay',function(date){ var ret = [(date.getDay() != 0 && date.getDay() != 7)]; return ret; });});
61 
62    jQuery(function($){
63jQuery(".hasDatepicker").datepicker().on("change", function(e) {//日付を選ぶたびに動かしたい
64var fDate =jQuery('.hasDatepicker').datepicker('getDate');
65
66if (fDate !== null) { 
67    fDate instanceof Date; 
68    var youbi = fDate.getDay();
69	alert(youbi);//試しにわかりやすくalertで取得できてるか確認
70	// ここからifで振り分けたり、色々やりたい処理を
71	if(youbi==6){
72	    jQuery('.heijitu').hide();
73	    jQuery('.doyou').show();
74	}else{
75	    	
76	    jQuery('.heijitu').show();
77	    jQuery('.doyou').hide();
78	}
79	
80
81	
82};
83});
84});
85

loving

2023/01/24 07:11

↓これでも上手くいきません。何が間違ってますか？ jQuery(function() { var disableDates = [ "2023/02/23" ]; jQuery("#datepicker").datepicker({ beforeShowDay: function(date) { // 特定日にクラス名を付ける var disableDate = jQuery.datepicker.formatDate('yy/mm/dd', date); if (disableDates.indexOf(disableDate)!== -1) { return [true, 'sunday100']; } // それ以外 return [true, '']; }, }) });

行動規範の内容に同意します

回答1件

ベストアンサー

javascript
1  var holidays = [
2    "20230211",
3    "20230223",
4    ];
5  var dateFormat='yymmdd';
6  $('.date').datepicker({
7  beforeShowDay:function(date) {
8    var holiday = $.datepicker.formatDate(dateFormat, date);
9    if($.inArray(holiday,holidays)>-1) return [true,'holiday',''];
10    if(date.getDay()==0) return [true,'sunday',''];
11    if(date.getDay()==6) return [true,'saturday',''];
12    return [true,'',''];
13  }
14  });

※調整しました

全文

以下まるっとコピペして確認してみてください

javascript
1<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
2<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
3<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
4<style>
5.saturday a{color:blue !important;}
6.sunday a,.holiday a{color:red !important;}
7</style>
8<script>
9$(function(){
10  var holidays = [
11    "20230211",
12    "20230223",
13    ];
14  var dateFormat='yymmdd';
15  $('.date').datepicker({
16  beforeShowDay:function(date) {
17    var holiday = $.datepicker.formatDate(dateFormat, date);
18    console.log(holiday);
19    if($.inArray(holiday,holidays)>-1) return [true,'holiday',''];
20    if(date.getDay()==0) return [true,'sunday',''];
21    if(date.getDay()==6) return [true,'saturday',''];
22    return [true,'',''];
23  }
24  });
25});
26</script>
27<input class="date">

クラスはついていてもcssの優先度が低いだけかもしれませんね

投稿2023/01/24 06:17

編集2023/01/24 07:12

yambejp

総合スコア114839

loving

2023/01/24 06:27

ご回答ありがとうございます！！！ jQuery(function() { jQuery('#datepicker').datepicker({ beforeShowDay:function(date) { var holidays = ['20230209', '20230215']; var holiday = $.datepicker.formatDate(dateFormat, date); if($.inArray(holiday,holidays)>-1) return [true,'holiday','']; if(date.getDay()==0) return [true,'sunday','']; if(date.getDay()==6) return [true,'saturday','']; return [true,'','']; } }); }); こうやってみましたが、上手くいきません。助けてください。どこが違っているのでしょうか？？

yambejp

2023/01/24 06:31

失礼しました、肝心のdateFormatを提示し忘れてました。再確認お願いします

loving

2023/01/24 06:44

```jQuery <script> jQuery(function() { var holidays = [ "20230211", "20230223", ]; var dateFormat='yymmdd'; jQuery('#datepicker').datepicker({ beforeShowDay:function(date) { var holiday = jQuery.datepicker.formatDate(dateFormat, date); if(jQuery.inArray(holiday,holidays)>-1) return [true,'holiday','']; if(date.getDay()==0) return [true,'sunday','']; if(date.getDay()==6) return [true,'saturday','']; return [true,'','']; } }); }); // 日曜日を非表示 jQuery(function(){ jQuery('#datepicker').datepicker(); jQuery('#datepicker').datepicker('option','beforeShowDay',function(date){ var ret = [(date.getDay() != 0 && date.getDay() != 7)]; return ret; });}); jQuery(function($){ jQuery(".hasDatepicker").datepicker().on("change", function(e) {//日付を選ぶたびに動かしたい var fDate =jQuery('.hasDatepicker').datepicker('getDate'); if (fDate !== null) { fDate instanceof Date; var youbi = fDate.getDay(); alert(youbi);//試しにわかりやすくalertで取得できてるか確認 // ここからifで振り分けたり、色々やりたい処理を if(youbi==6){ jQuery('.heijitu').hide(); jQuery('.doyou').show(); }else{ jQuery('.heijitu').show(); jQuery('.doyou').hide(); } }; }); }); </script> ``` ↑ありがとうございます。すみません。このように書き変えてもクラス名がつかないのですが、何か誤りがありますでしょうか？

yambejp

2023/01/24 07:54

まるっとコピペしてテストできるソースを記載してあります。確認お願いします

loving

2023/01/25 02:41

ありがとうございます！！！ｖｓcodeで確認したら、ちゃんと祝日にクラス名反映されてたのでコードは教えて頂いた通りで合っていました！！！

行動規範の内容に同意します