web-dev-qa-db-ja.com

Bootstrap datepicker in bootstrapボタンのドロップダウン

私の要件：Twitterで作業していますbootstrapボタンのドロップダウン（ http：// Twitter。 github.io/bootstrap/components.html#buttonDropdowns ）およびリストの1つでbootstrap-datepicker（ http://eternicode.github.io/bootstrap-datepicker/#examples ）を使用する下の画像に示すようなアイテム。

enter image description here

要件に応じて、最後の項目に月のカレンダーを含める必要があります。これをクリックすると、ブートストラップ-日付ピッカーが開き、月と年を選択できるようになります。

私が直面している問題：その日付ピッカーを開いて月または年を選択するか、日付ピッカーのナビゲーションのいずれかをクリックして別の月または年に移動するとき、ボタンのドロップダウンは非表示になりますが、下の画像のように日付ピッカーはそこに残ります。私は試みてきましたが、それを機能させることができませんでした。

enter image description here

私が思うこと（正しいかどうかはわかりません）：datepickerをクリックすると、body要素に直接アタッチされています。アイテムとその子はhtmlの奥深くにあります。したがって、ドロップダウン内のクリックでイベントの伝播を停止しようとしても、本文に追加されるため、日付ピッカーにはカウントされません。 （詳細については、他のリストアイテムをクリックするといくつかのアクションが定義されます）

誰かがこれを手伝ってくれたら本当にありがたいです、私は本当に私のプロジェクトのためにこれを機能させる必要があります。

jquerytwitter-bootstrapdrop-down-menuevent-handlingdatepicker
12
whyAto8

この日付ピッカーを使用すると、個々のボタンでの伝播を防ぐ必要があります。これをスクリプトに追加します。

    $(document).on('click', 'span.month, th.next, th.prev, th.switch, span.year', function (e) {
        e.stopPropagation();
    });

デモ

11
PSL

受け入れられた答えは私にはうまくいきませんでしたが、私は別の回避策を見つけました。

回避策

$('#your-datepicker')
    .datepicker()
    .on('show', function(e) {
        var $popup = $('.datepicker');
        $popup.click(function () { return false; });
    });

説明

日付ピッカーは、表示されるたびに<body>の末尾にHTMLを追加するようです。ポップアップのHTMLは次のようになります。

<div
    class="
        datepicker
        datepicker-dropdown
        dropdown-menu
        datepicker-orient-left
        datepicker-orient-top
    "
    style="display: block; top: 202px; left: 712.5px; z-index: 1010;">
    <!-- More HTML here -->
</div>

他の解決策は、clickイベントの伝播を防ぐことで問題を解決できることを示唆しています。これを実装する1つの方法は、イベントを処理してfalseを返すことです。ポップアップが表示されるたびにHTMLが生成されるため、インターセプトも毎回構成する必要がある場合があります。

5
Sam

受け入れられた答えは私にとってもうまくいきませんでしたし、@ Samもうまくいきませんでしたが、うまくいった別の解決策に私を向けました（Samに感謝します）。私の問題は、日付ピッカーが別の折りたたみ可能な要素内にあり、日付が選択されたときに折りたたまれてはならないことなどでした。これが私の解決策です。

    $('#myDatepicker').datepicker().on('click', function () {
        $('.datepicker').click(function(e) {
            e.stopPropagation(); // prevent clicks on datepicker from collapsing 'parent'
        });
    });
2
11nallan11