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

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

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

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

jQuery

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

2045閲覧

jQuery UI のdatepickerが反応しない

zz34

総合スコア7

jQuery UI

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

jQuery

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2017/11/01 07:16

編集2017/11/01 07:21

###前提・実現したいこと
jQueryのdatepickerで過去の日付と水曜日、年始の休業日を選択不可にしたい

###該当のソースコード

js

1 <script> 2 $(function() { // 休業日の設定 3 $("#datepicker, #datepicker02").change( function() { 4 holidays = ['2018/01/01', '2018/01/02', '2018/01/03', '2018/01/04', '2018/01/05']; 5 list = [ 6 [true, 'sunday'], 7 [true, ''], 8 [true, ''], 9 [false, ''], 10 [true, ''], 11 [true, ''], 12 [true, 'saturday'], 13 ]; 14 console.log('1'); 15 }); 16 $("#datepicker, #datepicker02").datepicker({ 17 // Option 18 minDate: 0, // 過去の日付選択不可 19 beforeShowDay: function(date) { 20 // 休日の判定 21 for (var i = 0; i < holidays.length; i++) { 22 var htime = Date.parse(holidays[i]); 23 var holiday = new Date(); 24 holiday.setTime(htime); 25 26 // 祝日 27 if (holiday.getYear() == date.getYear() && 28 holiday.getMonth() == date.getMonth() && 29 holiday.getDate() == date.getDate()) { 30 return [false, 'holiday']; 31 console.log('2'); 32 } 33 } 34 return(list[date.getDay()]); 35 console.log('3'); 36 }, 37 38 onClose: function(dateText, inst) { 39 $("#datepicker,#datepicker02").blur(); 40 } 41 }); 42 }); 43 44 $(function() { 45 $("#datepicker").datepicker(); 46 }); 47 $(function() { 48 $("#datepicker02").datepicker(); 49 }); 50 </script>

html

1<dl class="form"> 2 <dt>お名前<strong class="red">(必須)</strong></dt> 3 <dd> 4 <input type='text' name='text0' class='size1' value='' size='10' maxlength='' /> 5 </dd> 6</dl> 7<dl class="form kaiin"> 8 <dt>フリガナ<strong class="red">(必須)</strong></dt> 9 <dd> 10 <input type='text' name='text1' class='size1' value='' size='20' maxlength='' /> 11 </dd> 12</dl> 13<dl class="form"> 14 <dt>ご希望日時</dt> 15 <dd class="time"> 16 <em>第一希望<strong class="red">(必須) 年始の1/1~1/5はお休みいたします。</strong></em><br /> <!-- 一つ目のdatepicker --> 17 <input type='text' name='text2' readonly id='datepicker' size='10' /> 18 <select name='select1'> 19 <option value='' selected selected>-</option> 20 <option value='11:00'>11:00</option> 21 <option value='11:30'>11:30</option> 22 <option value='12:00'>12:00</option> 23 <option value='12:30'>12:30</option> 24 <option value='13:00'>13:00</option> 25 <option value='13:30'>13:30</option> 26 <option value='14:00'>14:00</option> 27 <option value='14:30'>14:30</option> 28 <option value='15:00'>15:00</option> 29 </select> 3031 <select name='select2'> 32 <option value='' selected selected>-</option> 33 <option value='11:00'>11:00</option> 34 <option value='11:30'>11:30</option> 35 <option value='12:00'>12:00</option> 36 <option value='12:30'>12:30</option> 37 <option value='13:00'>13:00</option> 38 <option value='13:30'>13:30</option> 39 <option value='14:00'>14:00</option> 40 <option value='14:30'>14:30</option> 41 <option value='15:00'>15:00</option> 42 </select> 43 44 <br /> 45 <em>第二希望</em><br /> 46 <input type='text' name='text3' readonly id='datepicker02' size='10' /> <!-- 二つ目のdatepicker --> 47 <select name='select3'> 48 <option value='' selected selected>-</option> 49 <option value='11:00'>11:00</option> 50 <option value='11:30'>11:30</option> 51 <option value='12:00'>12:00</option> 52 <option value='12:30'>12:30</option> 53 <option value='13:00'>13:00</option> 54 <option value='13:30'>13:30</option> 55 <option value='14:00'>14:00</option> 56 <option value='14:30'>14:30</option> 57 <option value='15:00'>15:00</option> 58 </select> 5960 <select name='select4'> 61 <option value='' selected selected>-</option> 62 <option value='11:00'>11:00</option> 63 <option value='11:30'>11:30</option> 64 <option value='12:00'>12:00</option> 65 <option value='12:30'>12:30</option> 66 <option value='13:00'>13:00</option> 67 <option value='13:30'>13:30</option> 68 <option value='14:00'>14:00</option> 69 <option value='14:30'>14:30</option> 70 <option value='15:00'>15:00</option> 71 </select> 72 73 </dd> 74</dl>

###試したこと
下記の先人様の質問などを参考にさせていただきました。
https://teratail.com/questions/85816
https://qiita.com/mnrck07/items/f8d9b004f5505494e3ce
http://www.aipacommander.com/entry/2015/07/20/123520
http://www.northwind.mydns.jp/samples/datepicker_sample7.php

おかげさまで二つ目のカレンダーの#datepicker02は指定した年始の日と水曜日が選択不可にできたのですが、なぜか一つ目の#datepickerは過去の日付にも戻れてしまい、年始も選択できてしまいます。定休日の水曜日も選択可能でした。

どちらも同じように書いてあるつもりなのですが、何が違っているのでしょうか。
自分では見当がつきません。どなたか知恵をお貸しいただけると助かります。

こちらのサイトでは初めて質問させていただきますので、何か不備がありましたらお手数ですがご指摘をお願い致します。

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

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

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

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

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

guest

回答1

0

ベストアンサー

提示されたコードをjsFiddleで再現してみましたが、そもそも動かなかったので一部修正しました。
これなら正しく動いています。

before

javascript

1 2 $("#datepicker, #datepicker02").change( function() { 3 holidays = ['2018/01/01', '2018/01/02', '2018/01/03', '2018/01/04', '2018/01/05']; 4 list = [ 5 [true, 'sunday'], 6 [true, ''], 7 [true, ''], 8 [false, ''], 9 [true, ''], 10 [true, ''], 11 [true, 'saturday'], 12 ]; 13 console.log('1'); 14 });

after

javascript

1 // changeの外にholidaysとlistの定義を出す 2 holidays = ['2018/01/01', '2018/01/02', '2018/01/03', '2018/01/04', '2018/01/05']; 3 list = [ 4 [true, 'sunday'], 5 [true, ''], 6 [true, ''], 7 [false, ''], 8 [true, ''], 9 [true, ''], 10 [true, 'saturday'], 11 ]; 12 $("#datepicker, #datepicker02").change( function() { 13 console.log('1'); 14 });

https://jsfiddle.net/cdL3734x/1/

投稿2017/11/01 07:24

masaya_ohashi

総合スコア9206

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

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

masaya_ohashi

2017/11/01 07:25

そもそもこのchangeが何をしたかったのかわからなかったので、とりあえずconsole.log("1")の為に残してありますが、意味が無いように見えます。
zz34

2017/11/01 07:43

masaya_ohashi様 早急な回答ありがとうございました!提示して頂いたリンク先も拝見しました。貴重なお時間を割いていただき、誠にありがとうございます。 ソースコードを直しましたら思い通りの動きになっていました。本当にありがとうございました。 chengeがいけなかったのですね。全く注視していませんでした。 なぜいけなかったのか、これから検証して調べてみます。ありがとうございました。
masaya_ohashi

2017/11/01 07:46

changeの中に書いた処理は$(...)の中で指定した要素が「書き換わったとき」に処理されるものです。つまり#datepicker、および#datepicker02が変更されたときです。 しかし、holidaysとlistは変更される前から必要なものですので、changeの中にあっては動作しない、ということです。
zz34

2017/11/01 08:22

masaya_ohashi様 説明までしていただき、ありがとうございます。 書き変わった時がトリガーなのですね、うろ覚えどころか全く違う処理だと勘違いしておりました。参考サイト様のコードを写しただけでよく調べずに質問してしまい、お時間を取らせてしまって申し訳ございません。大変参考になりました、ありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問