9

私はbootstrap-datepickerを使用しており、bootstrap 2のモーダルに日付ピッカーを表示したいと考えています.私が得た問題は、モーダルをスクロールするときに日付ピッカーがそれに応じてスクロールしないことです.それはまだ残っています.

ここに画像の説明を入力

コード：

<button class="btn btn-primary" data-toggle="modal" data-target="#myModal">Launch Modal</button>
<div id="myModal" class="modal hide fade" style="height: 400px; overflow: scroll">
    <div style="height:300px"></div>
    <div>Choose Date:
        <input class="calendar" />
    </div>
    <div style="height:300px"></div>
</div>

およびJavaScript：

var datePicker = $(".calendar").datepicker({});

jsfiddler: http://jsfiddle.net/csrA5/

モーダルをスクロールするときにスクロールさせる解決策はありますか?

4

7 に答える 7

13

datepicker('place')位置を更新するオプションがあります 。私はjsfiddleを更新しました

var datePicker = $(".calendar").datepicker({});
var t ;
$( document ).on(
    'DOMMouseScroll mousewheel scroll',
    '#myModal', 
    function(){       
        window.clearTimeout( t );
        t = window.setTimeout( function(){            
            $('.calendar').datepicker('place')
        }, 100 );        
    }
);
于 2013-12-10T08:04:26.860 に答える
2

jQuery を使用した別の方法を次に示します。

var checkout = $(".calendar").datepicker({});
$( "#myModal" ).scroll(function() {
    $('.calendar').datepicker('place')
});
于 2013-12-10T08:46:36.083 に答える
0

プロジェクトでブートストラップ日付ピッカーを使用しているときに、私も同じ問題に直面しました。Bootstrap-datepicker.js内の datepicker テンプレート内に非表示の透明レイヤーを作成し(クラス名'hidden-layer-datepicker'を使用)、固定位置を指定し、html の高さと幅全体を占める別の方法を使用しました。

    DPGlobal.template = '<div class="datepicker">'+ '<span class="hidden-layer-datepicker"></span><div class="datepicker-days">

datepicker モーダルがポップアップすると、新しく作成されたレイヤーがページ全体の幅と高さを占有し、モーダルが本文に追加されているためユーザーがスクロールすると、datepicker モーダルも一緒にスクロールします。新しいレイヤーの導入により、モーダルが開いている間、日付ピッカー入力フィールドが存在するコンテナーの内部スクロールが無効になります。

もう 1 つやるべきことは、隠しレイヤーをクリックしたときに datepicker モーダル クロージング イベントを更新することです。これは、 bootstrap-datepicker.js内の以下のコードを使用して行われます。

    // Clicked outside the datepicker, hide it
                    if (!(
                        this.element.is(e.target) ||
                        (this.picker.find(e.target).length && e.target.className != "hidden-layer-datepicker") ||
                        this.picker.is(e.target) ||
                        this.picker.find(e.target).length
                    )){
                        this.hide();
                    }
于 2016-12-09T12:10:55.860 に答える
0

関数「Datepicker.prototype」で、bootstrap-datepicker.jsにイベントスクロールを追加してみてください

[$(window), {
                resize: $.proxy(this.place, this),
                scroll: $.proxy(this.place, this)
            }]
于 2014-11-05T13:22:56.993 に答える
0

rab によって提供されるソリューションは機能しますが、ブートストラップ モーダルのスクロールで日付ピッカーがちらつくため、まだ完全ではありません。そこで、jquery のスクロール イベントを使用して、datepicker のスムーズな位置変更を実現しました。これが私のコードです：

    $( document ).scroll(function(){
        $('#modal .datepicker').datepicker('place'); //#modal is the id of the modal
    });
于 2015-08-27T02:15:38.270 に答える
0

理由はわかりませんが、配置はスクロールに基づいているため、bootstrap-datepicker.js でこのコードを見つける必要があります。

scrollTop = $(this.o.container).scrollTop();

そしてそれをに書き換えます

scrollTop = 0;

これは私を助けました、それが他の人を助けることを願っています。

于 2015-01-15T08:35:35.877 に答える