27

更新
Jquery 1.3.2 に戻しましたが、すべてが機能していますが、jquery と ui ライブラリのバージョン以外は何も変更していないため、何が問題なのかわかりません。
更新終了

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 ドロップ可能 1.8 jQuery UI
  • デートピッカー 1.8
4

22 に答える 22

32

私は同じ問題を抱えていましたが、私の場合、原因は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);
}

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

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

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

于 2011-03-05T02:34:34.233 に答える
23

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

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

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

いいえ

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

私は不注意でその間違いを犯しました。クラスを削除し、jQuery UI 呼び出しを許可すると、修正されたようです。

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

于 2017-09-14T14:39:46.887 に答える
11

それは、新しいファイルの css ファイルが機能しないことです。古い 1.7.* css ファイルもヘッダーにインクルードして、もう一度やり直してください。

また、構築した直後に .datepicker( "show" ) を実行しようとしましたか?

于 2010-04-21T14:09:02.487 に答える
4

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

于 2012-02-03T19:33:56.580 に答える
3

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 にアップグレードする前の古いバージョン) に埋め込まれていたためです。

重複する jquery.ui.datepicker.jsを削除すると、1.8.21 と 1.8.22 の両方の問題が解決されます。

于 2012-07-29T14:03:26.870 に答える
2

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

于 2010-04-21T13:34:25.473 に答える
1

Had the same problem that the datepicker-DIV has been created but didnt get filled and show up on click. My fault was to give the input the class "hasDatepicker" staticly. jQuery-ui hat to set this class by its own. then it works for me.

于 2015-07-23T10:31:07.547 に答える
0 
* html .ui-helper-hidden-accessible 
{
 position: absolute !important; 
 clip: rect(1px 1px 1px 1px); 
 clip: rect(1px,1px,1px,1px); 
}

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

于 2011-11-29T21:36:42.830 に答える
0

私も同様の問題を抱えています。異なるタブで 2 回目ではなく 1 回起動します。ID の代わりにクラスを使用し、どこでも同じクラス名を使用しました。私には、日付ピッカーが一度アクティブになり、元の初期化をどこでも使用する必要があるようです。おそらく、destroy api を使用してこれをコーディングできますが、私にとっては、どこでも同じクラスを使用するのは簡単でした。

于 2015-06-11T20:03:52.877 に答える
0

わかりました、私はついに私の解決策を見つけました。

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

于 2012-04-08T11:59:21.763 に答える
0

トリックの解決策を見つけました。以下のコードを使用できます。

$(".datepicker").datepicker({
/* any options you want */
beforeShowDay: function (date) {
    $('#ui-datepicker-div').css('clip', 'auto');
    return [true, '', ''];
    }
});
于 2016-12-14T07:50:51.187 に答える
0

私の場合、いくつかのテーマ (cupertino/theme.css) で発生するようです。

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

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

$(document).ready(function() {
    $("#datePicker").datepicker({ dateFormat: "yy-m-d" });
    $('#ui-datepicker-div').css('clip', 'auto');
});
于 2013-08-11T17:46:07.857 に答える
0

これは少し異なる問題です。私の場合、日付ピッカーは表示されますが、css は読み込まれませんでした。

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

于 2012-03-13T12:34:10.830 に答える
0

これが完全なコードです。それは私の側から機能しています。テストするだけです。

<!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>
于 2016-06-16T10:09:06.097 に答える
0

ブートストラップモーダルで作業しているときに同じ問題がありました。要素の日付ピッカー z-index css 属性をオーバーライドする.ui-datepickerために、誤って z-index を設定してしまいました。!important削除!importantは機能しました。

于 2019-11-23T06:55:59.470 に答える
0

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

現在の WP バージョン: 3.1.3

于 2011-06-25T22:41:32.910 に答える