teratail
回答率
85.48%
質問するログイン新規登録

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

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

新規登録して質問してみよう
ただいま回答率
85.48%
トップUIに関する質問
UI

UIはUser Interfaceの略であり、人間がコンピュータとやりとりをするためのシステムです。

jQuery

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

Q&A

解決済

1回答

713閲覧

店ごとにカレンダーの休日の設定

Leon-Lionking
Leon-Lionking

総合スコア37

UI

UIはUser Interfaceの略であり、人間がコンピュータとやりとりをするためのシステムです。

jQuery

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

0グッド

0クリップ

投稿2017/07/26 09:49

編集2017/07/26 10:21

0

0

jQuery UI のお問い合わせフォーム欄に「カレンダー」を実装していますが…
実行したい内容
・店（店舗A）を選択後、カレンダー通りに、選べるようにしたい。
・店ごとの休日が異なるため、カレンダー別に設定したい。
ご教授お願いします。

HTML（静的）

<form method="POST">
	<p>※お手数ですが、必須項目をすべてご入力の上、確認画面へお進みください。</p>

	<table class="mailform">
		<tr>
			<th>ご希望店舗</th>
			<td>
				<input type="hidden" name="ご希望店舗名" value="" />
				<ul class="list">
					<li><label><input type="radio" name="ご希望店舗名" value="店舗A" id="shop_a" /> 店舗A</label></li>
					<li><label><input type="radio" name="ご希望店舗名" value="店舗B" id="shop_b" /> 店舗B</label></li>
					<li><label><input type="radio" name="ご希望店舗名" value="店舗C" id="shop_c" /> 店舗C</label></li>
				</ul>
			</td>
		</tr>

		<tr>
			<th>お名前</th>
			<td><input id="user_name" type="text" name="お名前" size="40" />例：山田花子</td>
		</tr>

		<tr>
			<th>ふりがな</th>
			<td><input id="user_name_kana" type="text" name="ふりがな" size="40" />例：やまだはなこ</td>
		</tr>

		<tr>
			<th>お電話番号</th>
			<td><input type="text" name="お電話番号" size="26" />例：090-0000-0000</td>
		</tr>

		<tr>
			<th>メールアドレス</th>
			<td><input type="email" name="email" size="40" />例：info@google.com</td>
		</tr>

		<tr>
			<th>ご希望の連絡先</th>
			<td>
				<label><input type="radio" name="希望連絡先" value="お電話" /> お電話</label>
				<label><input type="radio" name="希望連絡先" value="メール" /> メール</label>
			</td>
		</tr>

		<tr>
			<th>第1希望日時</th>
			<td class="day">
				<input type="hidden" name="お客さまの第1希望日時" value="" />
				<input type="text" name="第1希望日" size="26" id="datepicker" placeholder="カレンダーから選択" />
				<select name="第1希望時">
					<option value="">時間帯を選択</option>
					<option value="12:00">12:00</option>
					<option value="12:30">12:30</option>
					<option value="13:00">13:00</option>
					<option value="13:30">13:30</option>
					<option value="14:00">14:00</option>
					<option value="14:30">14:30</option>
					<option value="15:00">15:00</option>
					<option value="15:30">15:30</option>
					<option value="16:00">16:00</option>
					<option value="16:30">16:30</option>
					<option value="17:00">17:00</option>
					<option value="17:30">17:30</option>
					<option value="18:00">18:00</option>
					<option value="18:30">18:30</option>
				</select>
			</td>
		</tr>

		<tr>
			<th>無料カウンセリング<br />第2希望日時</th>
			<td class="day">
				<input type="hidden" name="お客さまの第2希望日時" value="" />
				<input type="text" name="第2希望日" size="26" id="datepicker02" placeholder="カレンダーから選択" />
				<select name="第2希望時">
					<option value="">時間帯を選択</option>
					<option value="12:00">12:00</option>
					<option value="12:30">12:30</option>
					<option value="13:00">13:00</option>
					<option value="13:30">13:30</option>
					<option value="14:00">14:00</option>
					<option value="14:30">14:30</option>
					<option value="15:00">15:00</option>
					<option value="15:30">15:30</option>
					<option value="16:00">16:00</option>
					<option value="16:30">16:30</option>
					<option value="17:00">17:00</option>
					<option value="17:30">17:30</option>
					<option value="18:00">18:00</option>
					<option value="18:30">18:30</option>
				</select>
			</td>
		</tr>
		<tr>
			<th>質問などありましたら、ご入力ください。</th>
			<td><textarea name="質問などありましたら、ご入力ください。" rows="20" cols="60" class="mfp"></textarea></td>
		</tr>

	</table>
	<button type="submit">確認画面へ &gt;</button>
</form>

Script

jQuery(document).ready(function($){

	$( 'input[name="ご希望店舗名"]:radio' ).change( function() {  
		// Shop A
		if($( this ).attr('id') == 'shop_a'){

			// お盆や年末年始の休日を指定
			var holidays = ['2017-08-13','2017-08-14','2017-08-15','2017-08-16','2017-08-17','2017-08-18','2017-08-19'];

			$("#datepicker,#datepicker02").datepicker({
				// Option
				minDate: 0,
				showButtonPanel: true,
				beforeShowDay: function(date) {
					// 休日の判定
					for (var i = 0; i < holidays.length; i++) {
						var htime = Date.parse(holidays[i]);
						var holiday = new Date();
						holiday.setTime(htime);

						// 祝日
						if (holiday.getYear() == date.getYear() &&
						holiday.getMonth() == date.getMonth() &&
						holiday.getDate() == date.getDate()) {
							return [false, 'holiday'];
						}
					}

					//定休日はreturnをfalseに変更

					// 日
					if (date.getDay() == 0) {
						return [false, 'sunday'];
					}
					// 月
					if (date.getDay() == 1) {
						return [true, ''];
					}
					// 火
					if (date.getDay() == 2) {
						return [true, ''];
					}
					// 水
					if (date.getDay() == 3) {
						return [true, ''];
					}
					// 木
					if (date.getDay() == 4) {
						return [true, ''];
					}
					// 金
					if (date.getDay() == 5) {
						return [true, ''];
					}
					// 土
					if (date.getDay() == 6) {
						return [true, 'saturday'];
					}
					// 平日
					return [true, ''];
				},

				onSelect: function(dateText, inst) {
					$("#date_val").val(dateText);
				},

				onClose: function(dateText, inst) {
					$("#datepicker,#datepicker02").blur();
				}
			});

		// Shop B
		}else if($(this).is('#shop_b')){

			// お盆や年末年始の休日を指定
			var holidays = ['2017-09-13','2017-09-14','2017-09-15','2017-09-16','2017-09-17','2017-09-18','2017-09-19'];

			$("#datepicker,#datepicker02").datepicker({
				// Option
				minDate: 0,
				showButtonPanel: true,
				beforeShowDay: function(date) {
					// 休日の判定
					for (var i = 0; i < holidays.length; i++) {
						var htime = Date.parse(holidays[i]);
						var holiday = new Date();
						holiday.setTime(htime);

						// 祝日
						if (holiday.getYear() == date.getYear() &&
						holiday.getMonth() == date.getMonth() &&
						holiday.getDate() == date.getDate()) {
							return [false, 'holiday'];
						}
					}

					//定休日はreturnをfalseに変更

					// 日
					if (date.getDay() == 0) {
						return [false, 'sunday'];
					}
					// 月
					if (date.getDay() == 1) {
						return [true, ''];
					}
					// 火
					if (date.getDay() == 2) {
						return [true, ''];
					}
					// 水
					if (date.getDay() == 3) {
						return [false, ''];
					}
					// 木
					if (date.getDay() == 4) {
						return [true, ''];
					}
					// 金
					if (date.getDay() == 5) {
						return [true, ''];
					}
					// 土
					if (date.getDay() == 6) {
						return [false, 'saturday'];
					}
					// 平日
					return [true, ''];
				},

				onSelect: function(dateText, inst) {
					$("#date_val").val(dateText);
				},

				onClose: function(dateText, inst) {
					$("#datepicker,#datepicker02").blur();
				}
			});

		// Shop C
		}else($(this).is('#shop_c')){

			// お盆や年末年始の休日を指定
			var holidays = ['2017-10-13','2017-10-14','2017-10-15','2017-10-16','2017-10-17','2017-10-18','2017-10-19'];

			$("#datepicker,#datepicker02").datepicker({
				// Option
				minDate: 0,
				showButtonPanel: true,
				beforeShowDay: function(date) {
					// 休日の判定
					for (var i = 0; i < holidays.length; i++) {
						var htime = Date.parse(holidays[i]);
						var holiday = new Date();
						holiday.setTime(htime);

						// 祝日
						if (holiday.getYear() == date.getYear() &&
						holiday.getMonth() == date.getMonth() &&
						holiday.getDate() == date.getDate()) {
							return [false, 'holiday'];
						}
					}

					//定休日はreturnをfalseに変更

					// 日
					if (date.getDay() == 0) {
						return [true, 'sunday'];
					}
					// 月
					if (date.getDay() == 1) {
						return [false, ''];
					}
					// 火
					if (date.getDay() == 2) {
						return [true, ''];
					}
					// 水
					if (date.getDay() == 3) {
						return [false, ''];
					}
					// 木
					if (date.getDay() == 4) {
						return [true, ''];
					}
					// 金
					if (date.getDay() == 5) {
						return [false, ''];
					}
					// 土
					if (date.getDay() == 6) {
						return [true, 'saturday'];
					}
					// 平日
					return [true, ''];
				},

				onSelect: function(dateText, inst) {
					$("#date_val").val(dateText);
				},

				onClose: function(dateText, inst) {
					$("#datepicker,#datepicker02").blur();
				}
			});
		}

	});

});

長すぎたかもしれませんが、お力をお貸しください。
お願いします。

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

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

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

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

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

kei344
kei344

2017/07/26 09:55

「難航」とはどのような状況でしょうか。出ているエラーなどと併せて、具体的に記述されたほうが回答を得られやすいと思います。
alg
alg

2017/07/26 09:56

示された２つのコードの、どの部分で何がどのようにお困りなのでしょうか？もう少し具体的に書かれたほうが、回答がつきやすいと思います。
guest

回答1件

0

ベストアンサー

}else($(this).is('#shop_c')){

これが文法エラーでカレンダーがでないと思います。
(ChromeのChromeデベロッパー・ツールで文法エラーと表示されますよ)
そして、これを直して表示されたところで、最初に選択されたもののカレンダーしかイベント取れないかと思います。

beforeShowDayがカレンダー開く前に毎回呼ばれるのを利用して

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<form method="POST">
    <p>※お手数ですが、必須項目をすべてご入力の上、確認画面へお進みください。</p>

    <table class="mailform">
        <tr>
            <th>ご希望店舗</th>
            <td>
                <input type="hidden" name="ご希望店舗名" value="" />
                <ul class="list">
                    <li><label><input type="radio" name="ご希望店舗名" value="店舗A" id="shop_a" /> 店舗A</label></li>
                    <li><label><input type="radio" name="ご希望店舗名" value="店舗B" id="shop_b" /> 店舗B</label></li>
                    <li><label><input type="radio" name="ご希望店舗名" value="店舗C" id="shop_c" /> 店舗C</label></li>
                </ul>
            </td>
        </tr>

        <tr>
            <th>お名前</th>
            <td><input id="user_name" type="text" name="お名前" size="40" />例：山田花子</td>
        </tr>

        <tr>
            <th>ふりがな</th>
            <td><input id="user_name_kana" type="text" name="ふりがな" size="40" />例：やまだはなこ</td>
        </tr>

        <tr>
            <th>お電話番号</th>
            <td><input type="text" name="お電話番号" size="26" />例：090-0000-0000</td>
        </tr>

        <tr>
            <th>メールアドレス</th>
            <td><input type="email" name="email" size="40" />例：info@google.com</td>
        </tr>

        <tr>
            <th>ご希望の連絡先</th>
            <td>
                <label><input type="radio" name="希望連絡先" value="お電話" /> お電話</label>
                <label><input type="radio" name="希望連絡先" value="メール" /> メール</label>
            </td>
        </tr>

        <tr>
            <th>第1希望日時</th>
            <td class="day">
                <input type="hidden" name="お客さまの第1希望日時" value="" />
                <input type="text" name="第1希望日" size="26" id="datepicker" placeholder="カレンダーから選択" />
                <select name="第1希望時">
                    <option value="">時間帯を選択</option>
                    <option value="12:00">12:00</option>
                    <option value="12:30">12:30</option>
                    <option value="13:00">13:00</option>
                    <option value="13:30">13:30</option>
                    <option value="14:00">14:00</option>
                    <option value="14:30">14:30</option>
                    <option value="15:00">15:00</option>
                    <option value="15:30">15:30</option>
                    <option value="16:00">16:00</option>
                    <option value="16:30">16:30</option>
                    <option value="17:00">17:00</option>
                    <option value="17:30">17:30</option>
                    <option value="18:00">18:00</option>
                    <option value="18:30">18:30</option>
                </select>
            </td>
        </tr>

        <tr>
            <th>無料カウンセリング<br />第2希望日時</th>
            <td class="day">
                <input type="hidden" name="お客さまの第2希望日時" value="" />
                <input type="text" name="第2希望日" size="26" id="datepicker02" placeholder="カレンダーから選択" />
                <select name="第2希望時">
                    <option value="">時間帯を選択</option>
                    <option value="12:00">12:00</option>
                    <option value="12:30">12:30</option>
                    <option value="13:00">13:00</option>
                    <option value="13:30">13:30</option>
                    <option value="14:00">14:00</option>
                    <option value="14:30">14:30</option>
                    <option value="15:00">15:00</option>
                    <option value="15:30">15:30</option>
                    <option value="16:00">16:00</option>
                    <option value="16:30">16:30</option>
                    <option value="17:00">17:00</option>
                    <option value="17:30">17:30</option>
                    <option value="18:00">18:00</option>
                    <option value="18:30">18:30</option>
                </select>
            </td>
        </tr>
        <tr>
            <th>質問などありましたら、ご入力ください。</th>
            <td><textarea name="質問などありましたら、ご入力ください。" rows="20" cols="60" class="mfp"></textarea></td>
        </tr>

    </table>
    <button type="submit">確認画面へ &gt;</button>
</form>
<script>
var holidays = [];
var list = [];

jQuery(document).ready(function($){
    $( 'input[name="ご希望店舗名"]:radio' ).change( function() {
        // Shop A
        if($(this).attr('id') == 'shop_a'){
            // お盆や年末年始の休日を指定
            holidays = ['2017-08-13','2017-08-14','2017-08-15','2017-08-16','2017-08-17','2017-08-18','2017-08-19'];
            list = [
	            [false, 'sunday'],
	            [true, ''],
	            [true, ''],
	            [true, ''],
	            [true, ''],
	            [true, ''],
                [true, 'saturday'],
            ];
        }
        // Shop B
        else if($(this).is('#shop_b')){
            // お盆や年末年始の休日を指定
            holidays = ['2017-09-13','2017-09-14','2017-09-15','2017-09-16','2017-09-17','2017-09-18','2017-09-19'];
            list = [
	            [false, 'sunday'],
	            [true, ''],
	            [true, ''],
	            [false, ''],
	            [true, ''],
	            [true, ''],
                [false, 'saturday'],
            ];
        }
        // Shop C
        else if($(this).attr('id') == 'shop_c'){
            // お盆や年末年始の休日を指定
            holidays = ['2017-10-13','2017-10-14','2017-10-15','2017-10-16','2017-10-17','2017-10-18','2017-10-19'];
            list = [
	            [true, 'sunday'],
	            [false, ''],
	            [true, ''],
	            [false, ''],
	            [true, ''],
	            [false, ''],
                [true, 'saturday'],
            ];
        }

        $("#datepicker,#datepicker02").datepicker({
            // Option
            minDate: 0,
            showButtonPanel: true,
            beforeShowDay: function(date) {
                // 休日の判定
                for (var i = 0; i < holidays.length; i++) {
                    var htime = Date.parse(holidays[i]);
                    var holiday = new Date();
                    holiday.setTime(htime);

                    // 祝日
                    if (holiday.getYear() == date.getYear() &&
                    holiday.getMonth() == date.getMonth() &&
                    holiday.getDate() == date.getDate()) {
                        return [false, 'holiday'];
                    }
                }
                return(list[date.getDay()]);
            },

            onSelect: function(dateText, inst) {
                $("#date_val").val(dateText);
            },

            onClose: function(dateText, inst) {
                $("#datepicker,#datepicker02").blur();
            }
        });
    });

});
</script>
</body>
</html>

やっつけですがこんな感じなのかと。

投稿2017/07/26 12:01

編集2017/07/26 12:04
rururu3
rururu3

総合スコア5545

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問

トップUIに関する質問

店ごとにカレンダーの休日の設定