Bootstrap DatePicker with Bootstrap Modal Dialog

Question

I am trying to use a Bootstrap Datepicker within a Bootstrap Modal Dialog box (Bootstrap 3.0). The date picker is not displayed at all when using the Chrome browser but displays properly in Internet Explorer only when a confirm or alert statement is inserted as indicated in the code below.

   var GetDate = function () {
        BootstrapDialog.show({
            title: "Go To Date",
            message: '<div><input id="StartDate" type="text" /></div',
            draggable: true,
            closable: false,
            cssClass: 'login-dialog',
            buttons: [{
                label: "Return Date",
                action: function (dialogRef) {
                    alert($("#StartDate").val().toLocaleString());
                    dialogRef.close();
                }
            }]
        });

        // The code only works on IE9, IE10 and IE11 with the following line
        confirm();

        var dp = $("#StartDate");
        dp.datepicker({
            format: "dd/mm/yyyy",
            todayBtn: "linked",
            autoclose: true,
            todayHighlight: true,
            language: "en"
        });
    }

    <input id="Button1" type="button" value="button" onclick="GetDate();" />

Can someone tell me why this is happening and how to fix this problem?

user3815346 user3815346 · Accepted Answer · 2014-07-08T07:42:17

this line of CSS should help you:

.datepicker.dropdown-menu { height:245px; width:210px; **z-index: 2000 !important; text-      indent:0px !important;**}

Hope will be helpful for you too ...

Bootstrap DatePicker with Bootstrap Modal Dialog

1 Answers