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

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

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

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

JavaScript

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

Q&A

解決済

2回答

5420閲覧

datepickerで祝日を表示し、複数選択できるようにしたい

退会済みユーザー

退会済みユーザー

総合スコア0

jQuery UI

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

JavaScript

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

0グッド

1クリップ

投稿2016/08/30 06:30

編集2016/08/31 05:58

お世話になっております。
この質問と関連する内容になるのですが、
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:”を追加したことによって土日の色まで灰色に戻ってしまいました。

<div id="datepicker">をinputタグに変えると祝日は表示されますが複数選択の 表示(裏で配列には入っています)が死に、divタグだと複数選択は生きますが祝日表示が死ぬというジレンマに陥っています。 http://g.0-oo.net/gcalendar-holidays.jsの中身をdivタグでも動くように書き換えた方がいいのか、方針から決め直さないといけないようです…。

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

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

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

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

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

kunai

2016/08/30 06:35

エラーメッセージも提示いただけますか。
kei344

2016/08/30 09:37

「複数選択のサンプル」のURLは提示可能ですか?
kei344

2016/08/31 05:59

回答が付いた質問の編集は慎重に行ってください。質問文のコードについて指摘があった場合は「追記」し、元のコードを編集する場合も「直したこと」がわかるようにしてください。
guest

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

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

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

kei344

2016/08/31 06:44

12月から1月に変わったときに、祝日が取得できないと思うので、前後1年くらいを取得しておくか、onChangeMonthYearで確認してGCalHolidaysをする必要があると思います。
退会済みユーザー

退会済みユーザー

2016/08/31 06:50

ありがとうございます。盲点でした。もう少し検討してみます。
guest

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

kei344

総合スコア69364

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問