Q&A
エラーメッセージも提示いただけますか。
お世話になっております。
この質問と関連する内容になるのですが、
JqueryUIのdatepickerを使って祝日を表示した上で、
複数選択ができるようにしたいと思っています。
複数選択のサンプルを拡張して、祝日の表示を試みているのですが、
どなたかよい実装方法をご教授願えませんでしょうか。
<html> <head> <meta charset="UTF-8"/> <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css"/> <style> /* カレンダーのstyleを整える*/ .ui-datepicker td span, .ui-datepicker td a { text-align: center; } .ui-datepicker select.ui-datepicker-year, .ui-datepicker select.ui-datepicker-month { width: auto; } .ui-datepicker select.ui-datepicker-month { margin-left: 1em; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> <script src="http://g.0-oo.net/gcalendar-holidays.js"></script> <script> var current_year = null; // 表示されている年 var current_month = null; // 表示されている月 var selected_date = []; // 選択した年月日 var holidays; $(function(){ GCalHolidays.get(show, undefined, undefined); }); function show(holidays) { datepick(holidays); } function datepick(holidays){ var months = ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"]; $('#datepicker').datepicker({ beforeShowDay: function(date){ for ( j in holidays) { if(date.getFullYear == holidays[j].year && date.getMonth == holidays[j].month && date.getDate==holidays[j].date){ return [false, '', '']; }else{ } } return [true, '', '']; }, prevText: '前月', nextText: '次月', yearSuffix: "年", monthNames: months, monthNamesShort: months, showMonthAfterYear: true, dayNamesMin: ["日", "月", "火", "水", "木", "金", "土"], dateFormat: 'yy-mm-dd', onSelect: function( select_date ){ // selected_dateに入ってない場合は入れる。入ってる場合は削除。 var index=$.inArray(select_date,selected_date) if ( index == -1 ) { selected_date.push(select_date) } else { delete selected_date[index]; } setTimeout( function(){ for ( i in selected_date) { var data = selected_date[i].split('-'); var year = data[0]; // 年が違う if ( year != current_year ){ continue } var month = data[1]; // 月が違う if ( month != current_month ) { continue } var day = data[2] * 1; // 日を探して色をつける $('.ui-datepicker-calendar a').each(function(){ var $this = $(this); if ( $this.text() == day ) { $this.parent('td').css('background-color','#F00'); } }); } }, 100); }, onChangeMonthYear: function( year, month ) { current_year = year; current_month = month; setTimeout( function(){ for ( i in selected_date ) { var data = i.split('-'); var year = data[0]; if ( year != current_year ){ continue } var month = data[1]; if ( month != current_month ) { continue } var day = data[2] * 1; $('.ui-datepicker-calendar a').each(function(){ var $this = $(this); if ( $this.text() == day ) { $this.parent('td').css('background-color','#F00'); } }); } }, 100); } }); // current_year,current_monthを初期化 var current = $.datepicker.formatDate('yy-mm-dd', $('#datepicker').datepicker('getDate') ); if ( !current_year ) { var data = current.split('-'); current_year = data[0]; current_month = data[1] * 1; } } </script> </head> <body> <div id="datepicker"></div><br/> </body> </html>
追記：
カレンダーを表示するところまでは戻りましたが、”beforeShowDay:”を追加したことによって土日の色まで灰色に戻ってしまいました。
「複数選択のサンプル」のURLは提示可能ですか？
回答が付いた質問の編集は慎重に行ってください。質問文のコードについて指摘があった場合は「追記」し、元のコードを編集する場合も「直したこと」がわかるようにしてください。
回答2件
0
<html> <head> <meta charset="UTF-8"/> <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css"/> <style> /* カレンダーのstyleを整える*/ .ui-datepicker td span, .ui-datepicker td a { text-align: center; } .ui-datepicker select.ui-datepicker-year, .ui-datepicker select.ui-datepicker-month { width: auto; } .ui-datepicker select.ui-datepicker-month { margin-left: 1em; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> <script src="http://g.0-oo.net/gcalendar-holidays.js"></script> <script> var current_year = null; // 表示されている年 var current_month = null; // 表示されている月 var selected_date = []; // 選択した年月日 var holidays; $(function(){ GCalHolidays.get(show, undefined, undefined); }); function show(holidays) { datepick(holidays); } function datepick(holidays){ var months = ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"]; $('#datepicker').datepicker({ beforeShowDay: function(date){ if(date.getDay()==0){ return [true,"gcal-sunday",""] }else if(date.getDay()==6){ return [true,"gcal-saturday",""] }else{ for(var j=0;j<holidays.length;j++){ var h=holidays[j]; if(date.getFullYear()==h.year && date.getMonth()+1 == h.month && date.getDate()==h.date){ return [true,"gcal-holiday",h.title] } } return [true,"",""] } }, prevText: '前月', nextText: '次月', yearSuffix: "年", monthNames: months, monthNamesShort: months, showMonthAfterYear: true, dayNamesMin: ["日", "月", "火", "水", "木", "金", "土"], dateFormat: 'yy-mm-dd', onSelect: function( select_date ){ // selected_dateに入ってない場合は入れる。入ってる場合は削除。 var index=$.inArray(select_date,selected_date) if ( index == -1 ) { selected_date.push(select_date) } else { delete selected_date[index]; } setTimeout( function(){ for ( i in selected_date) { var data = selected_date[i].split('-'); var year = data[0]; // 年が違う if ( year != current_year ){ continue } var month = data[1]; // 月が違う if ( month != current_month ) { continue } var day = data[2] * 1; // 日を探して色をつける $('.ui-datepicker-calendar a').each(function(){ var $this = $(this); if ( $this.text() == day ) { $this.parent('td').css('background-color','#F00'); } }); } }, 100); }, onChangeMonthYear: function( year, month ) { current_year = year; current_month = month; setTimeout( function(){ for ( i in selected_date ) { var data = i.split('-'); var year = data[0]; if ( year != current_year ){ continue } var month = data[1]; if ( month != current_month ) { continue } var day = data[2] * 1; $('.ui-datepicker-calendar a').each(function(){ var $this = $(this); if ( $this.text() == day ) { $this.parent('td').css('background-color','#F00'); } }); } }, 100); } }); // current_year,current_monthを初期化 var current = $.datepicker.formatDate('yy-mm-dd', $('#datepicker').datepicker('getDate') ); if ( !current_year ) { var data = current.split('-'); current_year = data[0]; current_month = data[1] * 1; } } </script> </head> <body> <div id="datepicker"></div><br/> </body> </html>
投稿2016/08/31 06:36
退会済みユーザー
総合スコア0
12月から1月に変わったときに、祝日が取得できないと思うので、前後1年くらいを取得しておくか、onChangeMonthYearで確認してGCalHolidaysをする必要があると思います。
ありがとうございます。盲点でした。もう少し検討してみます。
0
ベストアンサー
構造が複雑なので一部だけ指摘します。
JavaScript
1beforeShowDay: function(date){ 2 GCalHolidays.get(show, undefined, undefined); // これが終わる前に beforeShowDay の関数が終わる（非同期処理のため） 3 function show(days) {return;} 4 for ( j in days) { // 変数「days」は、どこからも代入されていないので空。 5 if(date.getYear == j.year && date.getMonth == j.month && date.getDate==j.day){ 6 return [false, '', '']; 7 }else{ 8 return [true, '', '']; 9 } 10 } 11 // 読めていませんが return [true, '']; が無いといけないと思います。 12},
多分、beforeShowDay で GCalHolidays を実行するのではなく、datepicker起動前にGCalHolidays で前後1年分のデータを取得＆保存してからそのコールバックでdatepickerを起動し、beforeShowDay では取得しておいたデータから読み込んで休日判定するのが問題が起きにくいと思います。
それか、GCalHolidays 読み込みが終わった段階でdatepickerをリロード（たぶんできるはず）するとか。
投稿2016/08/30 17:01
総合スコア69625
あなたの回答
tips
プレビュー
