jquery ui datepickerでname属性を使うとカレンダーが閉じません。

Question

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

Comments

[date]

aタグの部分も見せてもらえませんか?

[she]

ありがとうございます。datepickerの日付のaタグ部分でよかったでしょうか。

Answer 1

動くサンプル：https://jsfiddle.net/3hzp0qqw/

問題が再現しません。

症状から見て、aタグの閉じ忘れがページのどこかにあるという可能性が非常に高いです。
出力されたHTML（ブラウザで「ページのソースを表示」）を確認し、タグの閉じ忘れや全角でタグを書いていないか、"" の閉じ忘れなどを確認してみてください。

Comments

[she]

ご回答ありがとうございます。
htmlのバリデータやタグ対応チェックなどしてみましたがaタグは間違えていないようでした。
しかし「name属性をつけたら」だったのでそこが原因だと思い込んでいたのですが、他のところかもしれないということですよね。すみませんちゃんと原因を探してみます…

[kei344]

> datepickerの日付のaタグ部分
何に必要なものですか？

[she]

「aタグの部分も見せてもらえませんか?」とのことでしたのでコピペした部分です。
jQuery UIのDatepickerが生成している部分で私にはよくわからないのですが、クリックイベントのためにaタグを使っていて、href="#"の部分は本来無効になるはずがなんらかの原因で有効のままになっていないのではないかと思っています…

[kei344]

aタグは関係ないと思いますよ。
適切にDatepickerを設定していれば、input要素にフォーカスが当たると動くと思います。