如何使用bootstrap datepicker作为输入创建bootbox提示
-
21-12-2019 - |
题
我正在使用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提示的任何想法?谢谢
解决方案
这个解决方法为我做了。欢迎任何更好的批准这个问题。
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
在DatePicker输入下的日历取决于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
}
. 其他提示
对于我正在研究的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调用结束。在我的项目上为我工作,希望它在你的项目中为你工作。
不隶属于 StackOverflow