bootbox上的浮层弹出如何加上datepicker

简介:

bootbox和datepicker都是插件,我想要做的需求大致长这样:

 

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 ,如需转载请自行联系原作者
相关文章
|
Android开发
Android 常见对话框的简单使用(提示信息对话框、单选多选对话框、自定义对话框)
Android 常见对话框的简单使用(提示信息对话框、单选多选对话框、自定义对话框)
388 0
Android 常见对话框的简单使用(提示信息对话框、单选多选对话框、自定义对话框)
|
6月前
uniapp popup弹出窗详解以及相关属性
uniapp popup弹出窗详解以及相关属性
679 3
|
JavaScript 前端开发
11EasyUI 菜单与按钮- 创建菜单按钮(Menu Button)
11EasyUI 菜单与按钮- 创建菜单按钮(Menu Button)
65 0
|
Web App开发 JavaScript 前端开发
对话框、模态框和弹出框看起来很相似,它们有何不同?
由于一个新的 popover 属性正在被提出,所以这篇文章将探讨对话框(dialogs)、弹出窗口(popovers)、叠加层(overlays)和揭示小部件(disclosure widgets)之间的区别。
26383 1
|
前端开发 数据安全/隐私保护
网页|利用提示框(Tooltip)实现弹窗效果
网页|利用提示框(Tooltip)实现弹窗效果
582 0
ListView onItemLongClick 弹出ContextMenu
ListView onItemLongClick 弹出ContextMenu
119 0
UWP 取消GridView、ListView鼠标选中、悬停效果
原文:UWP 取消GridView、ListView鼠标选中、悬停效果 因为经常碰到ListView或者ListBox之类的选中、鼠标悬停样式和自己设置的主题颜色不搭,这时就需要改变这些样式了. 而这里我通过ListView来说明,大致思路其实就是重新定义Item的Template。
1192 0