質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.49%
jQuery UI

jQuery UI はjQuery公式のインターフェースライブラリであり、対話型のウェブアプリケーションを作る際に役立ちます。

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

1589閲覧

datepickerで祝日・平日・土日を選択するごとに選べる営業時間を変えたい。

yukki-1227

総合スコア48

jQuery UI

jQuery UI はjQuery公式のインターフェースライブラリであり、対話型のウェブアプリケーションを作る際に役立ちます。

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2023/01/26 03:15

編集2023/07/27 01:57

前提

イメージ説明
wordpressのエレメンターにて、contctform7で予約フォームを作っており、datapickerカレンダーで平日・土曜・祝日を選ぶごとに選べる選択肢を変えたいのですが上手くいきません。
お願いします。助けてください。
平日・土曜はgatDayの数字でまだ振り分けられるのですが、祝日はgatDayの数字がついていないので選んだ状態をどう取得すればいいのか分かりません。
datepickerはコンタクトフォーム7のものを使用しています。

実現したいこと

  • ・datepickerで平日を選択したら、コンタクトフォーム7の営業時間の平日が出てきて、祝日と土曜の選択肢は消す。

・祝日を選択したら、コンタクトフォーム7の営業時間の祝日が出てきて、平日と土曜の選択肢は消す。
・土曜を選択したら、コンタクトフォーム7の営業時間の土曜が出てきて、平日と祝日の選択肢は消す。

発生している問題・エラーメッセージ①

↓で対応しようとしても上手くいくどころか、カレンダーの土曜や祝日判定が消えます。

JQuery

1<!-- <script> 2 $(function() { 3 4 $('.holiday').click(function(){ 5 $('.doyou').hide(); 6 $('.heijitu').hide(); 7 $('.syukujitu').show(); 8 }); 9 }); 10 11 </script> -->

該当のソースコード

jQuery

1 2```<script> 3 console.log('読み込み成功1'); 4 5 $(function(){ 6 var holidays = [ 7 "20230211", 8 "20230223", 9 ]; 10 var dateFormat='yymmdd'; 11 $('.test').datepicker({ 12 beforeShowDay:function(date) { 13 var holiday = $.datepicker.formatDate(dateFormat, date); 14 console.log(holiday); 15 if($.inArray(holiday,holidays)>-1) return [true,'holiday','']; 16 if(date.getDay()==0) return [false,'sunday','']; 17 if(date.getDay()==6) return [true,'saturday','']; 18 return [true,'heijitu','']; 19 } 20 }); 21 }); 22 console.log('読み込み成功'); 23 </script> 24 <input class="date"> 25 <script> 26 27 28// 日曜日を非表示 29 30 jQuery(function($){ 31jQuery(".test").datepicker().on("change", function(e) {//日付を選ぶたびに動かしたい 32var fDate =jQuery('.test').datepicker('getDate'); 33if (fDate !== null) { 34 fDate instanceof Date; 35 var youbi = fDate.getDay(); 36 alert(youbi);//試しにわかりやすくalertで取得できてるか確認 37 // ここからifで振り分けたり、色々やりたい処理を 38 if(youbi==6){ 39 jQuery('.heijitu').hide(); 40 41 jQuery('.doyou').show(); 42 }else{ 43 44 jQuery('.heijitu').show(); 45 jQuery('.doyou').hide(); jQuery(function(){ jQuery('.test').datepicker(); 46 47 48 49 } 50 51 52 53}; 54}); 55}); 56 57 58 59</script> 60<!-- <script> 61 $(function() { 62 63 $('.holiday').click(function(){ 64 $('.doyou').hide(); 65 $('.heijitu').hide(); 66 $('.syukujitu').show(); 67 }); 68 }); 69 70 </script> -->

該当のソースコード

contactform7

1コード 2```<label> 氏名 3 [text* your-name autocomplete:name] </label> 4 5<label> メールアドレス 6 [email* your-email autocomplete:email] </label> 7 8<label> 題名 9 [text* your-subject] </label> 10 11<label>予約カレンダー 12[text* date-reserve5 id:reserve-date class:test] 13</label> 14[select menu-530 id:select1 class:heijitu "平日" "犬" "猫"] 15[select menu-530 id:select2 class:doyou "土曜" "犬2" "猫2"] 16[select menu-530 id:select3 class:syukujitu "祝日" "犬3" "猫3"] 17<label> メッセージ本文 (任意) 18 [textarea your-message] </label> 19 20[submit "送信"]

試したこと

.holidayをクリックすると平日と土曜の選択肢が消えるようにしたつもりですが無理でした。
※また、onSelectオプションを使って、カレンダーの選択日(祝日と一致したら)によって営業時間の選択肢を変えようかと思いましたが、↓と他のコード(曜日振り分け)が共存しません。助けてください。↓をスクリプトの一番下に書いてもこれが動作しません
$(function() {
$('.test').datepicker({
onSelect: function(dateText) {
alert(dateText);
}
});
});

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yukki-1227

2023/01/26 05:05

先程、祝日や土曜を選んで再度カレンダーを開くと祝日土曜の判定が消えると書きましたが、↓を消したら解決しました。 // jQuery(function(){ jQuery('.test').datepicker(); // jQuery('.test').datepicker('option','beforeShowDay',function(date){ var ret = [(date.getDay() != 0 && date.getDay() != 7)]; return ret; });});
guest

回答1

0

ベストアンサー

.holidayをクリックすると平日と土曜の選択肢が消えるようにしたつもりですが無理でした。

開発者ツールで見てみたところ、holidayクラスが付与されているのは日付のtdタグですが、クリックされるのはその子要素のaタグなので、 $('.holiday').clickのイベントが発火しないのだと思います。
イメージ説明

1/27 追記①
datepickerの初期化時にonSelectイベントを設定することができるので、下記のように選択された日付から要素を取得して、クラスで判断する形がよさそうです。
合わせて、toggleを使ってshow/hideをまとめてあげると、すっきりするかと思います。

JQuery

1$('.test').datepicker({ 2 beforeShowDay:function(date) {//中略(質問者さんのコードのまま変更なし) 3 }, 4 onSelect:function(data,inst){ 5 let date = $('[data-month="' + inst.selectedMonth + '"][data-year="' + inst.selectedYear + '"]').find('[data-date="' + inst.selectedDay + '"]').parent(); 6 jQuery('select.heijitu').toggle(date.hasClass('heijitu')); 7 jQuery('select.doyou').toggle(date.hasClass('saturday')); 8 jQuery('select.syukujitu').toggle(date.hasClass('holiday')); 9 10 }, 11 });

1/31 追記②

土曜日と祝日が重なった場合の日を選ぶと土曜日のプルダウンが出てくるようにするにはどうすれば良いでしょうか?
土曜日と祝日が重なった場合土曜が優先されるように、~と並び順を逆にしましたが解決しません。

まず、なぜそうなるかの原因の話をします。
土曜かつ祝日の場合に祝日扱いになる原因は、beforeShowDayでクラスを設定する際に土曜かつ祝日の場合は祝日のクラスのみ設定されるためです。

beforeShowDay:function(date) { var holiday = $.datepicker.formatDate(dateFormat, date); console.log(holiday); // 2/11(祝日かつ土曜)は①の条件が適用されreturnするため、③の条件は適用されずsaturdayクラスはつかない   // ① if($.inArray(holiday,holidays)>-1) return [true,'holiday','']; // ② if(date.getDay()==0) return [false,'sunday','']; // ③ if(date.getDay()==6) return [true,'saturday','']; return [true,'heijitu','']; },

実際に土曜かつ祝日の2/11の日付を開発者ツールで見てみると、「holiday」クラスのみで、「saturday」クラスはついていないことがわかります。
イメージ説明
そうすると、以下のコードでは、クラスの有無のみで判定して表示非表示を切り替えているので、2/11は祝日扱いになってしまうことがわかると思います。

JQuery

1jQuery('select.syukujitu').toggle(date.hasClass('holiday')); 2jQuery('select.doyou').toggle(date.hasClass('saturday'));

次に解決策の話です。(いろいろなやり方があるので1例です)
土曜かつ祝日の場合に、「holiday」クラスと「saturday」クラスの両方を付与するようにしましょう。

jQuery

1 beforeShowDay:function(date) { 2 var holiday = $.datepicker.formatDate(dateFormat, date); 3 console.log(holiday); 4 if(date.getDay()==0) return [false,'sunday','']; 5 6 // 土曜かつ祝日の場合はholidayとsaturdayの両方のクラスがセットされるよう、以下のコードを変更 7 // if($.inArray(holiday,holidays)>-1) return [true,'holiday','']; 8 // if(date.getDay()==6) return [true,'saturday','']; 9 var setClass = []; 10 if($.inArray(holiday,holidays)>-1) { setClass.push('holiday');} 11 if(date.getDay()==6) {setClass.push('saturday');} 12 if(setClass.length) {return [true, setClass.join(' '),'']}; 13 14 return [true,'heijitu','']; 15 },

これで、土曜かつ祝日の2/11の日付に「holiday」クラスと「saturday」クラスの両方がつくようになりました。
イメージ説明

ただし、これだけだと、土曜と祝日の両方のプルダウンが表示されることになります。
そのため、onSelectの処理を変更して、土曜の場合は祝日のプルダウンは表示しないようにします。

jQuery

1 onSelect:function(data,inst){ 2 let date = $('[data-month="' + inst.selectedMonth + '"][data-year="' + inst.selectedYear + '"]').find('[data-date="' + inst.selectedDay + '"]').parent(); 3 jQuery('select.heijitu').toggle(date.hasClass('heijitu')); 4 jQuery('select.doyou').toggle(date.hasClass('saturday')); 5 jQuery('select.syukujitu').toggle(date.hasClass('holiday')&& !date.hasClass('saturday')); // 祝日かつ土曜でない場合に表示、に変更 6 7 },

上記のような形で、HTMLやスクリプト関係は、開発者ツールでクラスを見たりconsole.dirでオブジェクトの状態を見たりして、現状と原因を特定してから修正するようにすると解決しやすいです。
また、できれば当初の疑問が解決したらそれはクローズして別で質問したほうが回答も付きやすいかと思います。
初めのうちはいろいろ躓くことも多いかもしれませんが、頑張ってください!

投稿2023/01/26 07:04

編集2023/01/31 09:25
tori72

総合スコア125

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yukki-1227

2023/01/27 03:21

ご回答ありがとうございます!!!そういうやり方があるのですね、助かりました! ですが、該当サイトに飛んで実際に2月のカレンダーの日にちを選ぶと、平日を選んでも祝日のプルダウンが表示されたりしているのですが、これは何が原因でしょうか? 祝日のない1月や3月は確認したところ問題なく上手く行っていると思います。 ご教示何卒お願い致します。
tori72

2023/01/31 04:14

回答修正しましたが見ていただけてるでしょうか? よろしくお願いします。
yukki-1227

2023/01/31 06:30

ありがとうございます!返信が遅れて大変申し訳ございませんでした。 シンプルにまとめて頂いて大変助かりました。 恐れ入りますが、土曜日と祝日が重なった場合の日を選ぶと土曜日のプルダウンが出てくるようにするにはどうすれば良いでしょうか? 何卒ご教示お願い致します。
yukki-1227

2023/01/31 06:40

現在jQueryはご教示いただいたようにこのような形にしております↓ これを、土曜日と祝日が重なった場合土曜が優先されるように、 [jQuery('select.syukujitu').toggle(date.hasClass('holiday')); jQuery('select.doyou').toggle(date.hasClass('saturday')); ] と並び順を逆にしましたが解決しません。どうすればよろしいでしょうか?重ね重ね申し訳ございません ```jQuery  <script> console.log('読み込み成功1'); $(function(){ var holidays = [ "20230211", "20230223",  "20230321" ]; var dateFormat='yymmdd'; $('.test').datepicker({ beforeShowDay:function(date) { var holiday = $.datepicker.formatDate(dateFormat, date); console.log(holiday); if($.inArray(holiday,holidays)>-1) return [true,'holiday','']; if(date.getDay()==0) return [false,'sunday','']; if(date.getDay()==6) return [true,'saturday','']; return [true,'heijitu','']; }, onSelect:function(data,inst){ let date = $('[data-month="' + inst.selectedMonth + '"][data-year="' + inst.selectedYear + '"]').find('[data-date="' + inst.selectedDay + '"]').parent(); jQuery('select.heijitu').toggle(date.hasClass('heijitu')); jQuery('select.doyou').toggle(date.hasClass('saturday')); jQuery('select.syukujitu').toggle(date.hasClass('holiday')); }, }); }); console.log('読み込み成功'); </script> ```
tori72

2023/01/31 09:27

大丈夫ですよ~ 質問に追記しましたのでご確認ください
yukki-1227

2023/02/01 04:39

お疲れ様です。 素晴らしいご回答ありがとうございました。ご教示いただいたような改善点などを精進致します。 最終的にこうしました。↓ ```holiday.phpショートコードにして読み込ます) <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <style> .saturday a{color:blue !important;} .sunday a,.holiday a{color:red !important;} </style> </head> <body> <p> aaaaaaaa </p>    <script> console.log('読み込み成功1'); $(function(){ var holidays = [ "20230211", "20230223",  "20230321" ]; var dateFormat='yymmdd'; $('.test').datepicker({ beforeShowDay:function(date) { var holiday = $.datepicker.formatDate(dateFormat, date); console.log(holiday); if(date.getDay()==0) return [false,'sunday','']; // 土曜かつ祝日の場合はholidayとsaturdayの両方のクラスがセットされるよう、以下のコードを変更 // if($.inArray(holiday,holidays)>-1) return [true,'holiday','']; // if(date.getDay()==6) return [true,'saturday','']; var setClass = []; if($.inArray(holiday,holidays)>-1) { setClass.push('holiday');} if(date.getDay()==6) {setClass.push('saturday');} if(setClass.length) {return [true, setClass.join(' '),'']}; return [true,'heijitu','']; }, onSelect:function(data,inst){ let date = $('[data-month="' + inst.selectedMonth + '"][data-year="' + inst.selectedYear + '"]').find('[data-date="' + inst.selectedDay + '"]').parent(); jQuery('select.heijitu').toggle(date.hasClass('heijitu')); jQuery('select.doyou').toggle(date.hasClass('saturday')); jQuery('select.syukujitu').toggle(date.hasClass('holiday')&& !date.hasClass('saturday')); // 祝日かつ土曜でない場合に表示、に変更 }, }); }); console.log('読み込み成功'); </script> <input class="date"> <script> // $(function() { // $('.test').datepicker({ // beforeShowDay:function(date) {//中略(コードのまま変更なし) // }, // onSelect:function(data,inst){ // let date = $('[data-month="' + inst.selectedMonth + '"][data-year="' + inst.selectedYear + '"]').find('[data-date="' + inst.selectedDay + '"]').parent(); // jQuery('select.heijitu').toggle(date.hasClass('heijitu')); // jQuery('select.doyou').toggle(date.hasClass('saturday')); // jQuery('select.syukujitu').toggle(date.hasClass('holiday')); // }, // }); // }); // 日曜日を非表示 // jQuery(function($){ // jQuery(".test").datepicker().on("change", function(e) {//日付を選ぶたびに動かしたい // var fDate =jQuery('.test').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(); // jQuery('.syukujitu').hide(); // }else if($('[data-handler="selectDay"]').hasClass('holiday')){ // // 祝日 // jQuery('.heijitu').hide(); // jQuery('.doyou').hide(); // jQuery('.syukujitu').show(); // }else{ // // 平日 // jQuery('.heijitu').show(); // jQuery('.doyou').hide(); // jQuery('.syukujitu').hide(); // } // jQuery(function(){ jQuery('.test').datepicker(); // jQuery('.test').datepicker('option','beforeShowDay',function(date){ var ret = [(date.getDay() != 0 && date.getDay() != 7)]; return ret; });}); }; }); }); </script> </body> </html> ```
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.49%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問