3

複数の日時ピッカーを含む HTML テンプレートがあります。ボタンをクリックして 1 つの datetimepicker を開き、その後別のボタンをクリックして新しいものを開くと、最初のものは変更されません (閉じません)。一度に 1 つの datetimepicker しか開けないようにしたい。

JsFiddleのデモはこちら

$('#datetimepicker1, #datetimepicker2').datetimepicker();

これは、bootstrap datetimepicker 2.5 で moment 2.5 (moment-with-langs) を使用する場合の標準的な動作でしたが、現在はそのようには機能していないようです。

この問題を回避するためのアイデアはありますか?

注: Eonasdan の bootstrap-datetimepicker バージョン 3.0.3 と moment 2.8 (moment-with-locales)、jQuery 1.9、および Bootstrap 3 を使用しています。

ここで注意が必要なのは、bootstrap-datetimepickerが、トリガー ボタンとはまったく関係のない、初期化された各 datetimepicker に追加さ<body>れることです。<div>

4

2 に答える 2

5

これを試して：

$('.date').datetimepicker();
$(document).ready(function() {
    // Select all elements with the 'date' class
    $('.date').on('dp.show', function() {
        $('.date').not($(this)).each(function() {
            $(this).data("DateTimePicker").hide();
            // $('.date').not($(this)) selects all the .date elements except
            // for the one being shown by the datetimepicker dp.show event.
            // The dp.show event is fired when a new datetimepicker is opened.
            // We use the .data("DateTimePicker") to access the datetimepicker object
            // (we have to use a jQuery each loop in order to access all the 
            // datetimepickers.
            // .hide() -- we hide it.
        });
    });
});

これにより、一度に開くことができる datetimepicker は 1 つだけになります。

于 2014-09-22T17:14:57.750 に答える
1

Joel Lubranoの答えは、プリロードされたウィジェットに対して意図したとおりに機能しますが...動的に生成されたウィジェットを（JS経由で）操作する可能性がありません。その間、コンポーネント内からこの問題を回避し、1行追加することで両方の問題を解決しました。

コンポーネントのJS内でpicker.show関数を見つけます（バージョンに応じて1150行目（これはv1.3.1））...その関数の最後のelseステートメント内に、次の行をそのステートメントの最初の命令として配置します。

$('.picker-open').hide().removeClass('picker-open');

以上です。その後は、DTP の初期化を関数内にカプセル化し、ドキュメントの準備ができて動的に生成されたウィジェットの後にそれを呼び出すだけで済みます。

function DTPinit(){
    $('.dtp').datetimepicker();
}

$(function(){
    DTPinit();
    $('#dtp_gen').on('click', function(){
        $('body').append('<div class="form-group"><div class="input-group dtp date""><input type="text" class="form-control datetimepicker" /><span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span></div></div>');
        DTPinit();
    });
});

ここに、私が上で説明したことを示すJSFiddleがあります。BS-DTP コンポーネントは、編集目的で fiddle JS コンテナー内にロードされています。

于 2014-10-03T09:40:50.040 に答える