1330952600 JQueryのDatepickerでカレンダーを導入したのですが

なんでか、下に四角いテキストエディタみたいのが表示してしまいます。
対策方法は何でしょうか?
※一度カレンダーを開くと消えます。

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2012/03/05 22:03:24
  • 終了:2012/03/12 22:05:10

回答(1件)

id:Lhankor_Mhy No.1

Lhankor_Mhy回答回数779ベストアンサー獲得回数2312012/03/08 11:37:02

ポイント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によって非表示にされています。

.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をご確認されると何か原因が分かるかもしれません。

  • id:Lhankor_Mhy
    補足お願いします。
    ・ソースは提示できますか?
    ・その現象を確認したブラウザはなんでしたか?
    ・「四角いテキストエディタみたいの」とはtextareaのことでしょうか?
  • id:rouge_2008
    こちらもEC-CUBEに関する質問でしょうか?
    管理画面の適当なページに追加してみましたが、デフォルトのデザインでは、質問の現象が確認できませんでした。
    問題の箇所のHTMLと適用されているCSSを確認してみてはいかがでしょうか?


    > Lhankor_Mhyさん

    質問の画像では「四角いテキストエディタみたいの」が何かは分かりませんね・・・
    長さは違いますが、EC-CUBEの管理画面でのh2に指定された枠線に似ているように思います。

    border-bottom: 3px solid #CCC;
  • id:makocan
    >Lhankor_Mhyさん

    四角はなぜか画像添付に失敗してました。
    下記になります。

    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>
  • id:makocan
    >rouge_2008さん
    画像は上のURLに記載させて頂きました。
    また、Ec-Cubeではありません。
  • id:rouge_2008
    コメントの記述だけでは問題の現象は発生しないようです。
    もう少し広範囲のコードを提示できないでしょうか?(表示する文字は適当に置き換えて大丈夫ですので・・・)
    他に読み込んでいる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>

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません