JQueryのDatepickerでカレンダーを導入したのですが
なんでか、下に四角いテキストエディタみたいのが表示してしまいます。
対策方法は何でしょうか？
※一度カレンダーを開くと消えます。
No.1
814
232
100pt
ご提示の画像が404エラーになってしまうようです。
これは完全に推測ですが、表示されているのは空divだと思います。
datepickerメソッドはまず、
<div id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"></div>
という要素をbody要素内の最後に生成するようです。
で、これは、jquery-ui.cssによって非表示にされています。
1912
1869
.ui-datepicker { width: 17em; padding: .2em .2em 0; display: none; }
その後カレンダーを表示すると、インラインスタイルにて、
display: block;
となり、カレンダーを非表示にすると、インラインスタイルにて、
display: none;
となります。
そこでたとえばページのCSSで、
body#hoge > div{ display:block; }
のような指定があると、jquery-ui.cssの指定をオーバーライドして非表示になっている空div要素を表示してしまいます。
そして、その後カレンダーを表示するとインラインスタイルが優先されて適用される、つまり一度カレンダーを表示すると消えることになると思います。
一度、ご自分のCSSをご確認されると何か原因が分かるかもしれません。
2
コメント（5件)
・ソースは提示できますか？
・その現象を確認したブラウザはなんでしたか？
・「四角いテキストエディタみたいの」とはtextareaのことでしょうか？
管理画面の適当なページに追加してみましたが、デフォルトのデザインでは、質問の現象が確認できませんでした。
問題の箇所のHTMLと適用されているCSSを確認してみてはいかがでしょうか？
> Lhankor_Mhyさん
質問の画像では「四角いテキストエディタみたいの」が何かは分かりませんね・・・
長さは違いますが、EC-CUBEの管理画面でのh2に指定された枠線に似ているように思います。
border-bottom: 3px solid #CCC;
四角はなぜか画像添付に失敗してました。
下記になります。
http://photodream.jp/img2/xd6d017umsbmycxkxoam7ych07_6rwqw.jpeg/600/m1nclm8aralos2kad7l0q545f4/photo.jpg
ソースは下記で
ブラウザはクロームになります。
<input type="text" name="dateRegistStart" id="dateRegistStart" size="10" />～
<input type="text" name="dateRegistEnd" id="dateRegistEnd" size="10" />
<link type="text/css" href="/common_admin/js/jQuery/themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="/common_admin/js/jquery.js"></script>
<script type="text/javascript" src="/common_admin/js/jQuery/ui.core.js"></script>
<script type="text/javascript" src="/common_admin/js/jQuery/ui.datepicker.js"></script>
<script type="text/javascript" src="/common_admin/js/jQuery/i18n/ui.datepicker-ja.js"></script>
<script type="text/javascript">
$(function() {
$.datepicker.setDefaults($.extend($.datepicker.regional['ja']));
$("#dateRegistStart").datepicker({
showOn: 'button',
buttonImage: '/common_admin/js/jQuery/images/calendar.gif',
buttonImageOnly: true,
dateFormat: 'yy-mm-dd',
changeMonth: true,
changeYear: true,
yearRange: '2011:2099',
showMonthAfterYear: false
});
$.datepicker.setDefaults($.extend($.datepicker.regional['ja']));
$("#dateRegistEnd").datepicker({
showOn: 'button',
buttonImage: '/common_admin/js/jQuery/images/calendar.gif',
buttonImageOnly: true,
dateFormat: 'yy-mm-dd',
changeMonth: true,
changeYear: true,
yearRange: '2011:2099',
showMonthAfterYear: false
});
});
</script>
</td>
画像は上のURLに記載させて頂きました。
また、Ec-Cubeではありません。
もう少し広範囲のコードを提示できないでしょうか？(表示する文字は適当に置き換えて大丈夫ですので・・・)
他に読み込んでいるCSSやjsがあればその内容と、テーブル全体と四角のHTML部分までは必要です。
Google Chromeを使用しているのでしたら、任意の箇所を右クリック→「要素を検証」で該当部分のHTMLが確認できます。
問題の四角の所で右クリックして、HTMLと右側のStylesで適用されているCSSを確認してみてください。
※関係ありませんが、オプションが同じなのでしたら、以下のようにしても大丈夫です。
同梱されている「development-bundle/demos/datepicker/date-range.html」を確認してみてください。
<script type="text/javascript">
$(function() {
$.datepicker.setDefaults($.extend($.datepicker.regional['ja']));
$("#dateRegistStart, #dateRegistEnd").datepicker({
showOn: 'button',
buttonImage: '/img/jquery/datepicker/calendar.gif',
buttonImageOnly: true,
dateFormat: 'yy-mm-dd',
changeMonth: true,
changeYear: true,
yearRange: '2011:2099',
showMonthAfterYear: false
});
});
</script>