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

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

ただいまの
回答率

88.09%

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 2,455

score 22

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();
                }
            });
        }

    });

});

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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2017/07/26 18:55

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

    キャンセル

  • alg

    2017/07/26 18:56

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

    キャンセル

回答 1

checkベストアンサー

+1

}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>


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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • この投稿は削除されました

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

  • ただいまの回答率 88.09%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る