부트 스트랩 Datepicker를 입력으로 부트 박스 프롬프트를 만드는 방법

Question

BootBox를 사용하여 대화 상자를 작성하고 있습니다.

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 입력으로 BootBox 프롬프트를 만드는 방법에 대한 아이디어는 무엇입니까?감사합니다

Answer 1

이 해결 방법은 나를 위해 그것을했습니다.이 문제에 대한 더 나은 승인은 환영합니다.

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는 모달 오버레이 뒤에 표시됩니다.DatePicker.css에서 z-index : 99999! 중요 .datepicker

BootBox 대화 상자의 위치에 따라 DatePicker 입력에서 캘린더 오른쪽을 Ajust하려면 다음 스타일을 추가하십시오.

.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
}

.

Answer 2

나는 내가 일하고있는 엠버 프로젝트에 대해 똑같은 질문을했다.코드에 대한 해결책을 적용하면 다음과 같이 표시됩니다.

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();

.

BootCox 호출의 끝에 datepicker()를 추가하기 만하면됩니다.내 프로젝트에서 나를 위해 일했고, 당신을 위해 당신을 위해 당신을 위해 당신을 위해 일하기를 바랍니다.