2

テキストリンクの1つが日付ピッカーカレンダーを開くようにCSSメニューを設定しようとしています。以下のコードまですべてを削除しました。私が経験している問題は、以下のコードが機能しないことですが、ulを削除すると、liタグが機能し始めます。

1.8.0JQueryと1.8.23JQueryUIを使用しています。

<!DOCTYPE html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $("#dp").datepicker({
        onSelect: function(dateText, inst) {
            alert(dateText);
        },
    });

    $("#datep").click(function() {
        $("#dp").datepicker("show");
    });
});
</script>
</head>
<body>
<ul>
    <li><a href="#" id="datep">Test</a><input type="hidden" id="dp" /></li>
</ul>
</body>
</html>

私が気づいたいくつかの奇妙なこと。入力をulの下に移動すると、ある程度は機能しますが、数回クリックしてオフにするとエラーが発生しますが、その入力の下に空のdivを追加すると、正常に機能し始めるようです。

どんな助けでも大歓迎です。

4

3 に答える 3

9

つまり、これはバグです。非表示の入力の直後にブロックレベルの要素を追加する必要があります。

HTML：

<ul>
    <li><a href="#" id="datep">Test</a>
        <input type="hidden" id="dp" />
        <div></div>
    </li>
</ul>​

例： http： //jsfiddle.net/andrewwhitaker/LE2CG/1/

于 2012-08-30T23:32:19.280 に答える
3

テキストが非表示 の別のバージョン：http： //jsfiddle.net/sKXJt/ 作業デモ http://jsfiddle.net/BhqmY/

これは、非表示のテキストボックスに役立ちます。

それが原因に役立つことを願っています。:)私は反対票についてはよくわかりません:)。ここに隠されたテキストのあるバージョンを参照してください：http：//jsfiddle.net/sKXJt/

コード

$(document).ready(function() {
    $("#dp").datepicker({
        onSelect: function(dateText, inst) {
            alert(dateText);
        },
    });

    $('#datep').click(function() {
        $('#dp').datepicker('show');
    });



});​

作業画像

ここに画像の説明を入力してください

于 2012-08-30T23:24:58.307 に答える
0

プロジェクト全体でこれを使用しているので、これを行うためのコンパクトなjQueryプラグインを作成し、共有することにしました。

JSFiddle：https ://jsfiddle.net/yahermann/xyjhyqma/

HTML：

<span class="some-datepicker-class">
  <a href="(some link)" data-date-param="(some date param)">(some initial date)</a>
</span>

JAVASCRIPT：

$('span.some-datepicker-class').datepicker_link();  // see jsfiddle for options

デフォルトのonSelectハンドラーは、最初のHTMLで設定されたオプションのリンクと日付のパラメーターを取ります。両方が提供されている場合、新しい日付を選択すると、プラグインは提供されたリンクをロードし、選択された日付を提供されたパラメーターの値として含めます。例：

<a href="http://example.com" data-date-param="mydate">2018-05-05</a>

初日2018-05-05が表示されます。新しい日付を選択すると、プラグインは次のページをロードします：http://example.com?mydate=(new_date）

この機能が望ましくない場合は、href = "＃"を設定するか、代わりに独自のonSelectコールバックを提供してください。

于 2018-05-12T18:56:58.973 に答える