###jQuery UIのDatepickerで予約日を指定してもらおうと思っています。
wordpressの自作テーマでメールフォームはメールフォームプロCGIを使っています。
今回、jQuery UIのDatepickerで予約日をカレンダーから指定してもらおうと思っています。
###name属性を使うとカレンダーが閉じません。
Datepickerを正しく表示させることはできましたが、メールフォームプロCGIに値を引き継がせるためにname属性を使うと、下記のように挙動がおかしくなります。
・日をクリックして選択すると、ページ上部に戻ってしまう。(値は正常です。)
・このときhttp://example.com/reservation#のように、URLの最後に#がついている
・カレンダーが閉じていない
大変恐れ入りますが教えていただけたら幸いです…
よろしくお願いいたします…
###該当のソースコード
フォームのページ
<input type="hidden" name="日時" data-join="日+ +時" /><input type="text" class="datepicker" name="日"> <select name="時"> <option value=" ">時間をご選択ください</option> <option value="10:00">10:00</option> <option value="10:30">10:30</option> <option value="11:00">11:00</option> <option value="11:30">11:30</option> </select>
header.php
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery.ui.datepicker-ja.min.js"></script> <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css" > <script> $(function() { $(".datepicker").datepicker({ minDate: '0y', //今日から maxDate: '+5m', dateFormat: 'yy/mm/dd(D)', //年-月-日(曜日) firstDay: 1, beforeShowDay: function(day) { var result; switch (day.getDay()) { case 3: // 水曜日を選択できないようにする result = [false]; break; default: result = [true]; // それ以外は選択できる break; } return result; } }); }); </script>
追記
datepickerの日付には<a href="#">がついているので、name属性をつけた時だけURLの最後に#がつくということは、なんらかの原因で、無効にされるはずのリンクイベントが生きているということだと思うのですが、直し方が分かりません…
追記2
datepickerの日付のaタグ部分は下記のようになっています。
<a class="ui-state-default ui-state-highlight" href="#">28</a>