如何使用bootstrap datepicker作为输入创建bootbox提示

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 

有关如何创建日期选择器输入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

要ajust权下根据您的bootbox对话框中的位置的日期选择器输入压延，增加以下样式：

.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

我对我正在研究的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通话结束。在我的项目上为我工作，希望它适合你。