How to create a bootbox prompt with a bootstrap datepicker as input

bootbox, datepicker, twitter-bootstrap

Solution

This workaround did it for me. Any better approch to this issue is welcome.

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"
        }
    }
});

The datepicker will show behind the modal overlay. In the datepicker.css, add z-index: 99999 !important to the .datepicker

To ajust the calender right under the datepicker input depending on the position of your bootbox dialog box, add the follow style:

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

Problem

I am creating a dialog box using 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 ``` Any idea about how to create a bootbox prompt with datepicker input? Thanks

Original source