jQuery UI「datepicker 」の呼び出し時にJavaScriptのonselect オプションを使う方法

Question

前提・実現したいこと

PHPで予約システムを作る勉強をしています。よろしくお願いします。

現在「予約日(datepicker)が今日の場合は、現在時刻以降のselectを表示」のwebページを見ながら進めているのですが、エラーが出て行き詰まっています。

jQueryのdatepickerで日付を取得し<select name="time">で時間を取得、予約日(datepicker)が今日の場合は、現在時刻以降のselectを表示したいです。

発生している問題・エラーメッセージ

Uncaught SyntaxError: Function statements require a function name

該当のソースコード

//予約日(datepicker)が今日の場合は、現在時刻以降のselectを表示
    onSelect: function(dateText, inst) {
        $("#date_val").val(dateText);
        if(today == dateText){
            for(var i = 0; i < timelist.length; i++){
                if(timelist[i] < time){
                    document.getElementById(timelist[i]).style.display = "none";
                }
            }
        } else{
            for(var i = 0; i < timelist.length; i++){
                document.getElementById(timelist[i]).style.display = "";
            }
        }              
    }

コード全体

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script src="asset/datepicker-ja.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/flick/jquery-ui.css">


<b>予約フォーム</b><br>
<form method="POST" action="">
1.お名前(必須)<br>
<input class="form1" type="text" name="username" placeholder="　お名前"/><br><br>
2.メールアドレス(必須)<br>
<input class="form1" type="text" name="username" placeholder="〇〇@gmail.com"/><br><br>
3.カレンダーから日付を選択してください<br>
<input type="text" id="date_val" placeholder="2018年〇月〇日"/><br>
<div id="datepicker"></div><br>
4.時間を選択してください<br>
    <select name="time">
    <option value=""> 選択してください</option>
    <option value="">9:00～</option>
    <option value="">10:00～</option>
    <option value="">11:00～</option>
    <option value="">13:00～</option>
    <option value="">14:00～</option>
    <option value="">15:00～</option>
    <option value="">16:00～</option>
    <option value="">17:00～</option>
    </select>
 
    <select name="time">
    <option value="">30分</option>
    <option value=""　selected>60分</option>
    <option value="">90分</option>
    <option value="">120分</option>
    </select>
 
    <br><br>
5.ご希望される弁護士を選択してください<br>
    <select name="lawyer">
    <option value=""> 選択してください</option>
    <option value="">松島</option>
    <option value="">小野</option>
    <option value="">草野</option>
    </select>
    <br><br>
    <input type="submit" value="予約する" class="submit">
</form>

<script>
     //yyyymmdd形式で日付を取得
    var dt = new Date();
    var y = dt.getFullYear();
    var m = ("00" + (dt.getMonth()+1)).slice(-2);
    var d = ("00" + dt.getDate()).slice(-2);
    var today = y + "年"+ m + "月" + d + "日";
    console.log(today);
    
    
$(function() {
    var dateFormat = 'yy年mm月dd日';
    $("#datepicker").datepicker({
        lang:'ja',
        dateFormat: dateFormat,
        minDate: 0,
        onSelect: function(dateText, inst) {
            $("#date_val").val(dateText);
            if(today == dateText){
                for(var i = 0; i < timelist.length; i++){
                    if(timelist[i] < time){
                        document.getElementById(timelist[i]).style.display = "none";
                    }
                }
            } else{
                for(var i = 0; i < timelist.length; i++){
                    document.getElementById(timelist[i]).style.display = "";
                }
            }              
        }
    });
 
    //土日選択不可設定
    $(function() {
    var dateFormat = 'yy年mm月dd日';
    $("#datepicker").datepicker({
        lang:'ja',
        dateFormat: dateFormat,
        minDate: 0,
        onSelect: function(dateText, inst) {
                    $("#date_val").val(dateText);
        }
    });
    $( "#datepicker" ).datepicker('option','beforeShowDay',function(date){
        var ret = [(date.getDay() != 0 && date.getDay() != 6)];
        return ret;
    });
});

    });

</script>

Answer 1

onSelect:以下の部分は、単体で書くものではありません。

$("#datepicker").datepicker({の引数オブジェクトのonSelectと置き換える形で書いてください。

Comments

[emi_ono]

maisumakunさん、ありがとうございます！
$("#datepicker").datepicker({　の引数オブジェクトを置き換えました。

すると「index.php:67 Uncaught ReferenceError: timelist is not defined」
とエラーがでました。
webページの説明には「idと現在時刻の分を比較して、idが現在時刻より前(値が小さければ)、display noneに変更する。」とあるのですが、timelistにid（時間？）の値を入れるにはどうすれば良いでしょうか。
アドバイスをいただけると嬉しいです。よろしくお願いします。

[maisumakun]

> timelistにid（時間？）の値を入れるにはどうすれば良いでしょうか。

そもそも、timelistとは何なのでしょうか。「timelist is not defined」というエラーメッセージのとおり、変数自体が定義されていません。

[emi_ono]

ありがとうございます。
timelistの解説がなく突然でてきたのですが、
for(var i = 0; i < timelist.length; i++){ if(timelist[i] < time){ とあるので、 <select name="time">の値を配列にしてるのかな？と考えたのですが、、

[maisumakun]

事前に自分で用意しておかないといけないものなのではないでしょうか？

[emi_ono]

ここまで用意する指示はなかったです。
「予約時間をselectできるようにする」という項目で、
最初<option value="">9:00～10:00</option>と設定していたものを<option value="">9:00～</option>のように変更してselectを作るとありました。

[maisumakun]

とはいえ、コード自体が「optionのIDが入った timelistを用意しておく」という前提になっているので、そのままでは動かないです。

[emi_ono]

そうですね。
もう少し調べてみます！ありがとうございます。