2

ブートボックスを使用してダイアログ ボックスを作成しています。

bootbox.dialog({
    message: 'Datepicker input: <input id="date"></input>',
    title: "Custom label",
    buttons: {
        main: {
            label: "Save",
            className: "btn-primary",
            callback: function () {
                console.log("Hi " + $('#first_name').val());
            }
        }
    }
});

$("#date").datepicker(); //Not working

datepicker 入力を使用してブートボックス プロンプトを作成する方法について何か考えはありますか? ありがとう

4

2 に答える 2

7

この回避策は私のためにそれをしました。この問題に対するより良いアプローチは大歓迎です。

function BootboxContent() {
    var frm_str = '<form id="some-form">'
        + '<div class="form-group">'
        + '<label for="date">Date</label>'
        + '<input id="date" class="date span2 form-control input-sm" size="16" placeholder="dd-mm-yy" type="text">'
        + '</div>'
        + '</form>';

    var object = $('<div/>').html(frm_str).contents();

    object.find('.date').datepicker({
        format: 'yyyy-mm-dd',
        autoclose: true
    }).on('changeDate', function (ev) {
        $(this).blur();
        $(this).datepicker('hide');
    });

    return object
}

//Show the datepicker in the bootbox
bootbox.dialog({
    message: BootboxContent,
    title: "Reschedule Rule",
    buttons: {
        main: {
            label: "OK",
            className: "btn-primary"
        }
    }
});

日付ピッカーは、モーダル オーバーレイの背後に表示されます。datepicker.css で、z-index: 99999 !importantを.datepickerに追加します。

ブートボックス ダイアログ ボックスの位置に応じて日付ピッカー入力のすぐ下にあるカレンダーを調整するには、次のスタイルを追加します。

.modal-open .datepicker {
    left: 52% !important; //Change it according to the position of your dialog
    top: 25% !important; //Change it according to the position of your dialog
}
于 2014-02-26T10:30:59.283 に答える
5

私が取り組んでいた Ember プロジェクトについても同じ質問がありました。私のソリューションをコードに適用すると、次のようになります。

bootbox.dialog({
    message: 'Datepicker input: <input id="date"></input>',
    title: 'Custom label',
    buttons: {
        main: {
            label: 'Save',
            className: 'btn-primary',
            callback() {
                console.log("Hi " + $('#first_name').val());
            }
        }
    }
}).datepicker();

datepicker()Bootbox 呼び出しの末尾に を追加するだけです。私のプロジェクトで私のために働いてくれました。あなたのプロジェクトでうまくいくことを願っています。

于 2014-03-19T19:23:34.017 に答える