web-dev-qa-db-ja.com

最初のページの読み込み時に奇妙に見えるjQuery UI Datepicker divをオーバーライドします。

ここで奇妙なことが起こっています：

Datepickerのインスタンスが奇妙な場所に this ページの左上隅の単一のバーとして表示されています。

ページでjQuery UIのDatepickerとAccordionの両方を使用しています。 UIのCSSでは、少なくともFirebugに従って、Datepickerのdisplay:noneがアコーディオンのdisplay:blockによってオーバーライドされているようです（以下の画像を参照）。

次に、「ケータリング/イベントルーム」タブでDatepickerトリガーをクリックすると（ボタンの1つをクリックして、Datepickerでdivを表示）、display:noneが機能するように見えます。

悪いdivは次のようになります。

bad div

これがFirebugパネルです。

css

cssjquery-uidatepickeraccordion
31
Adam

私は同じ問題を抱えていましたが、上記の解決策のいくつかは機能しますが、すべての最も簡単な修正はこれをあなたのCSSに追加することです：

#ui-datepicker-div {display: none;}

これは基本的に、既存の非表示要素にバインドできない場合、再調整された日付ピッカー要素を非表示にします。非表示にしますが、日付ピッカーを表示する必要がある要素をクリックすると、初期化されます。再初期化時に、id #ui-datepicker-divのdatepicker要素は正しい位置になります。

43
alxbrd

問題は、日付ピッカーを表示されていないものにバインドしていることである可能性があり、奇妙な位置付けを説明します（存在しないものからオフセットしようとすると、（0,0）からのオフセットに縮退します）。 datepicker _<div>_には少なくともテーブルが含まれている必要があるため、datepickerが混乱し、初期化が完了する前に例外がスローされる可能性があります。バインドされた入力の1つをクリックすると、おそらくそれ自体が再び初期化され（少なくとも初期化が適切に終了し）、その後はすべて正常に動作します。

日付入力が表示されたら、日付ピッカーをバインドしてみてください。

  • $(".date_picker").datepicker({ disabled: false });を削除します
  • _id="cater"_を_<input type="text" name="cater"/>_に追加します
  • 「イベントルームの予約」ボタンが押されたときに$('#cater').datepicker();を呼び出します。

それが機能する場合は、他の日付ピッカーに同様のハックを追加する必要があります。それが機能しない場合、私はおそらく間違っています。私の推測が正しいことが判明した場合は、jQuery-UIの人々にバグを報告することをお勧めします。

ところで、Safariでは最初の2つのタブしか表示できません。「ケータリング」タブを表示するには、Firefoxに切り替える必要がありました。奇妙なことに、Chromeでは問題なく動作します。これはおそらく無関係ですが、とにかくあなたに知らせたいと思いました。

4
mu is too short

問題は、日付ピッカーがまだ利用できないことにバインドされている要素にあります。

私が見つけた解決策は、実際の要素がクリックされたときに日付ピッカーを初期化し、初期化の直後にそれを表示することでした。これにより、datepickerが要素にバインドされて初期化される前に要素が使用可能になります。

$(function() {
  $(".date_input").click(function() {
    $(this).datepicker();
    $(this).datepicker("show");
  });
});

....

<input type="text" class='date_input' />
3
Matt Ramsay

私の場合は、JQueryのセッション "$（document）.ready（function（）{"を使用しています。

システムのすべてのページに読み込まれるJavaScriptファイルがあるので、次の行を追加しました。

$('#ui-datepicker-div').css('display', 'none');

私にとっては、ライブラリを変更する必要がなかったため、明確でエレガントなソリューションのように見えます。

何よりも、すべてのブラウザで正常に動作しています。 :)

3
Alexandre Ribeiro

私はChrome=で同様の問題があり、編集して解決しましたjquery-ui1.7.2.custom.css

から：

.ui-helper-hidden-accessible { position: absolute; left: -99999999px; }

に：

.ui-helper-hidden-accessible { position: absolute; left: -9999999px; }

Chromeのナインが多すぎる可能性があります。

2
Jan Cintala

時々、それはページ上の別のアイテムのz-indexがより高いことと関係があります。 Z-indexを非常に高い数値に設定すると、問題が解決しました。

#ui-datepicker-div {z-index:11111;}
1
hgolov

最後のブロックをページの下部（bodyタグを閉じる直前）に移動してみてください。なぜこれをしたいのかについては、こちらで詳しく読むことができます。

http://webdevel.blogspot.com/2008/09/place-javascript-code-at-bottom-of-page.html

ところで：メニューのためのクールなアイデア。私はそれが好きです。

1
chprpipr