bootbox和datepicker都是插件，我想要做的需求大致长这样：
![image]( "image")
我希望使用bootbox弹出的对话框中能弹出一个截止时间的选择框，这个选择框使用datepicker来做。
看了下这个帖子：
http://stackoverflow.com/questions/22009649/how-to-create-a-bootbox-prompt-with-a-bootstrap-datepicker-as-input
难点在于：
1 datepicker这个html是ajax生成的，需要绑定datepicker事件
2 datepicker出来的时间选择器会出现在浮窗后面。
解决代码如下:
![复制代码]()
<script type="text/javascript">
function bindDatePicker() {
$("#datepicker").datepicker({
showOtherMonths: true,
});
}
function createLong(event){
event.preventDefault();
var pid = $("#cur_pid").val();
bootbox.dialog({
message: '<style>.datepicker{z-index: 99999 !important}<\/style>\
<form class="form-horizontal" role="form" id="create_report_form">\
<input type="hidden" name="pid" value="'+ pid +'" />\
<div class="form-group">\
<label class="col-sm-3 control-label no-padding-right" for="form_title"> 标题 </label>\
<div class="col-sm-9">\
<textarea class="form-control" name="title" placeholder="标题"></textarea>\
</div>\
</div>\
<div class="form-group">\
<label class="col-sm-3 control-label no-padding-right">\
内容 </label>\
<div class="col-sm-9">\
<textarea class="form-control" name="content" placeholder="内容"></textarea>\
</div>\
</div>\
<div class="form-group">\
<label class="col-sm-3 control-label no-padding-right">\
目标 </label>\
<div class="col-sm-9">\
<textarea class="form-control" name="target" placeholder="目标"></textarea>\
</div>\
</div>\
<div class="form-group">\
<label class="col-sm-3 control-label no-padding-right">\
截止时间 </label>\
<div class="col-xs-6">\
<div class="input-group input-group-sm">\
<input type="text" id="datepicker" class="form-control hasDatepicker">\
<span class="input-group-addon">\
<i class="icon-calendar"></i>\
</span>\
</div>\
</div>\
</div>\
\<script type="text/javascript">bindDatePicker()\<\/script>\
</form>',
title: "创建长期计划",
buttons:
{
"success" :
{
"label" : "<i class='icon-ok'></i> 提交",
"className" : "btn-sm btn-success",
"callback": function() {
var params = $("#create_report_form").serialize();
$.ajax({
type: "post",
dataType: "jsonp",
url: "http://api.test/report/create",
data: params,
jsonp: 'callback',
jsonpCallback: 'callbackReportCreate',
success: function(data) {
if (data.msg == 'ok') {
var reports = data.data;
location.reload();
}
}
});
}
}
}
});
}
本文转自轩脉刃博客园博客，原文链接：
http://www.cnblogs.com/yjf512/p/3791178.html
，如需转载请自行联系原作者
