web-dev-qa-db-ja.com

JQuery UI Datepickerが表示されない

[〜＃〜] update [〜＃〜]
Jquery 1.3.2に戻りましたが、jqueryとuiライブラリのバージョン以外は何も変更していないので、問題が何であるかがわからないため、すべてが機能しています。
UPDATE END

JQuery UI datepicker に問題があります。日付ピッカーはクラスに添付されており、その部分は機能していますが、日付ピッカーは表示されていません。

これは、使用しているdatepickerコードと、クラス ".datepicker"のある入力ボックスをクリックしたときに生成されるインラインスタイルです。

$('.datepicker').datepicker({dateFormat:'dd/mm/yy'});

display:none;
left:418px;
position:absolute;
top:296px;
z-index:1;

Display：noneをdisplay：blockに変更すると、日付を選択したときに閉じられないことを除き、datepickerは正常に動作します。

使用中のJqueryライブラリ：

  • jQuery JavaScriptライブラリv1.4.2
  • jQuery UI 1.8 jQuery UIウィジェット1.8
  • jQuery UIマウス1.8 jQuery UI
  • 位置1.8 jQuery UIドラッグ可能1.8
  • jQuery UI Droppable 1.8 jQuery UI
  • デイトピッカー1.8
jqueryjquery-uidatepickeruidatepickerjquery-ui-datepicker
27
scott

新しいもののcssファイルは機能しません。古い1.7。* cssファイルもヘッダーに含めて、もう一度試してください。

また、構築した直後に.datepicker（ "show"）を実行しようとしましたか？

11
user227353

私は同じ問題を抱えていましたが、私の場合、何らかの理由でdatepicker divが原因であることがわかりました。次のCSSを持つ.ui-helper-hidden-accessibleクラスを保持しています：

.ui-helper-hidden-accessible {
 position: absolute !important;
 clip: rect(1px 1px 1px 1px);
 clip: rect(1px,1px,1px,1px);
}

私はjqueryのGoogle CDNホストバージョンを使用しているため、コードやCSSを変更できませんでした。また、成功せずにz-indexを変更しようとしました。私のために働いた解決策は、日付ピッカーのクリッププロパティをデフォルト値のautoに戻すことでした：

$('.date').datepicker();
$('#ui-datepicker-div').css('clip', 'auto');

これは特にdatepicker divを対象としているため、ui-helper-hidden-accessibleクラス全体を変更するよりも、他のウィジェットで意図しない副作用が発生する可能性は低くなります。

33
undefined

これは誰かに役立つかもしれません。フォームデータ（日付ピッカー入力ボックスがある）をコピーして貼り付けた場合、do notを誤ってclass = "hasDatepicker"をコピーしてください。

つまり、入力ボックスは次のようになります。

<input id="dateChooser" name="dateChooser" type="text" value=""/>

ない

<input id="dateChooser" name="dateChooser" type="text" value="" class="hasDatepicker">

誤ってその間違いを犯しました。クラスを削除し、jQuery UI呼び出しを許可すると、それを修正するように見えました。

それが誰かを助けることを願っています！

16
Bren1818

私は同じ問題を抱えていました。日付ピッカーは正常に追加されました（FireBugでも見つかりました）が、表示されませんでした。 FireBugを使用して、Date Picker div（ID： "ui-datepicker-div"）からクラス "ui-helper-hidden-accessible"を削除すると、Date Pickerが表示され、通常のように機能します。

$（document）.ready（）関数の最後に次を追加すると、ページ上のすべての日付ピッカーにこれが適用され、すべてが機能するようになります。

$(document).ready(function() {
      //...
      //Put all of you other page setup code here
      //...

      //after setting everything up (including adding all Date Pickers)
      //apply this code to every Date Picker
      $('#ui-datepicker-div').removeClass('ui-helper-hidden-accessible');  
});

それが私の最初の修正でした。その後、ブライアン・モーテンソンが提案した上記の解決策を試してみましたが、どちらも完全に機能し、要素からクラス全体を削除するよりも侵襲性が低いように見えました。そこで、使用した方法に彼のソリューションを適用するようにコードを変更しました（すべての日付ピッカーに適用され、繰り返しを必要としないようにドキュメントのセットアップの最後に適用します）。

$(document).ready(function() {
      //...
      //Put all of you other page setup code here
      //...

      //after setting everything up (including adding all Date Pickers)
      //apply this code to every Date Picker
      $('#ui-datepicker-div').css('clip', 'auto');  
});

これが誰かが動けなくなるのに役立つことを願っています。

編集：コードの構文エラーを修正しました。

10
olen_garn

Jquery-ui 'js'および 'css'ファイルの同じバージョンを使用していることを確認してください。時にはそれが問題になる可能性があります。

4
Anticipator

JQueryおよびjQuery UIの1.7.2バージョンでも同様の問題が発生しました。ポップアップは表示されず、上記の該当する提案はいずれも役に立ちませんでした。私の場合に助けたのは、class = "hasDatepicker"を取り出すことでした（ここで受け入れられる回答として： jQuery UI datepickerは表示されません-完全なコードが含まれています ）日付ピッカーはテキストフィールドに既に追加されています。早くその答えを見つけてほしい。

4
Spaceploit

JQuery-UI 1.8.21とJQuery-UI 1.8.22を使用しても同じ問題が発生しました。

問題は、2つのDatePickerスクリプトがあり、1つはjquery-ui-1.8.22.custom.min.jsで、もう1つはjquery.ui.datepicker.js（1.8.21にアップグレードする前の古いバージョン）。

duplicatejquery.ui.datepicker.jsを削除して、1.8.21と1.8.22の両方の問題を解決します。

3
Jeremie

行を変更しました

.ui-helper-hidden-accessible {position：absolute！important;クリップ：rect（1px 1px 1px 1px）;クリップ：rect（1px、1px、1px、1px）; }

に

.ui-helper-hidden-accessible {position：absolute！important; }

そして今、すべてが機能します。それ以外の場合は、Soldierflupが示唆したように、z-indexをアップしてみてください。

2
Kyle Robson

Datepicker-DIVが作成されたのと同じ問題がありましたが、クリックしても入力されず表示されませんでした。私の欠点は、入力にクラス「hasDatepicker」を静的に与えることでした。このクラスを独自に設定するjQuery-uiハット。それは私のために動作します。

1
SchließMuskelKater

Datepicker cssのz-indexをずっと高くしてみてください（例：z-index：1000）。日付ピッカーは、おそらく元のコンテンツの下に表示されます。私は同じ問題を抱えていたので、助けてくれました。

1
Soldierflup

さて、私はついに自分の解決策を見つけました。

ビューでテンプレートを使用している場合（Moustache.jsなどを使用）、一部のクラスが2回ロードされるか、後で作成されることを考慮する必要があります。そのため、インスタンスが作成されたら、この関数$(".datepicker" ).datepicker();を適用する必要があります。

0
Mc-

Metro UI css（ http://metroui.org.ua/ から設定された優れた無料のmetro UI）のスクリプトを使用している場合、これも衝突する可能性があります。私の場合、これは最近の問題でした。

したがって、metro UIのスクリプト参照を削除しました（コンポーネントを使用していなかったため）。datepickerが表示されます。

しかし、jQuery-uiのdatepickerをmetroで探すことはできません

しかし、他の人が述べたように、ほとんどの場合、jQuery-UI JavaScriptの重複バージョンと衝突します。

0
Tejasvi Hegde

私のケースの根本原因が彼女について説明されていないため、投稿するだけです。

私の場合、問題は「assets/js/fuelux/treeview/fuelux.min.js」がコンストラクタ.datepicker（）を追加していたため、assets/js/datetime/bootstrap-datepicker.jsをオーバーライドしていたことです。

移動するだけ

$（ '。date-picker'）が私の問題を解決する直前になるように。

0
D.Firka

WordPressコントロールパネルで、ThemeRollerが生成したテーマを使用しているときにこの問題が発生している場合-テーマの1.7.3バージョンを使用していることを確認してください。1.8.13は機能しません。よく見ると、要素はレンダリングされていますが、.ui-helper-hidden-accessibleが原因で表示されません。

現在のWPバージョン：3.1.3

0
Andy
* html .ui-helper-hidden-accessible 
{
 position: absolute !important; 
 clip: rect(1px 1px 1px 1px); 
 clip: rect(1px,1px,1px,1px); 
}

これはIEでのみ機能するため、このハックを適用し、FF、Safariなどで正常に動作します。

0
Ricardo Cruz

私の場合、いくつかのテーマ（cupertino/theme.css）で起こるようです。

問題は、以前のユーザーが言ったように、クリッププロパティを持つ.ui-helper-hidden-accessibleクラスです。

上書きするだけで大​​丈夫です

$(document).ready(function() {
    $("#datePicker").datepicker({ dateFormat: "yy-m-d" });
    $('#ui-datepicker-div').css('clip', 'auto');
});
0
user2672796

ここに完全なコードがあります、それは私の側から働いています：ただテストしてください。

<!doctype html>
<html lang="en">
   <head>
      <title>jQuery Datepicker</title>
      <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <script>
         $(function() {
            $( "#datepicker1" ).datepicker();
         });
      </script>
   </head>
   <body>
      <p>Enter Date: <input type="text" id="datepicker1"></p>
   </body>
</html>
0
Hrushi

トリックソリューションを見つけました。以下のコードを使用できます。

$(".datepicker").datepicker({
/* any options you want */
beforeShowDay: function (date) {
    $('#ui-datepicker-div').css('clip', 'auto');
    return [true, '', ''];
    }
});
0
adenizc

私も同様の問題を抱えています。別のタブで2回目に起動するのではなく、1回起動します。 idではなくクラスを使用し、どこでも同じクラス名を使用しました。私には、datepickerが一度アクティブになり、元の初期化をどこでも使用する必要があるように見えます。 destroy APIを使用しておそらくこれを回避できますが、私にとってはどこでも同じクラスを使用するのは簡単でした。

0
Jeff B.

これはわずかに異なる問題です。日付ピッカーは表示されますが、CSSが読み込まれていませんでした。

テーマをリロードします（jquery ui css、行43に移動し、そこにURLをコピーしてthemerollerテーマを編集します）>詳細オプションなしで再保存する>古いファイルを置き換える> URLを変更しないようにして、それが役立つかどうかを確認する同様に。

0
Adamantus