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 ,如需转载请自行联系原作者
相关文章
|
人工智能 自然语言处理 Linux
AI谱曲 | 基于RWKV的最佳开源AI作曲模型魔搭推理实践
AI谱曲 | 基于RWKV的最佳开源AI作曲模型魔搭推理实践
|
缓存 安全 应用服务中间件
百度搜索:蓝易云【Nginx的搭建和优化详细教程。】
通过以上步骤,你已经成功搭建和优化了Nginx服务器。你可以根据自己的需求进行进一步的配置和调整,以满足你的网站的性能和安全需求。
345 3
初识Redission分布式锁
在微服务系统中,某些场景需要阻塞所有节点的所有线程,对共享资源的访问。比如并发时“超卖”和“余额减为负数”等情况,需要对同一资源进行加锁,这些就需要进行分布式。
初识Redission分布式锁
|
JavaScript
js判断一个字符串是以某个字符串开头
js判断一个字符串是以某个字符串开头
789 0
|
JavaScript
【jQuery学习】—jQuery对象的串联
【jQuery学习】—jQuery对象的串联
|
供应链 架构师 安全
软件架构预述
软件架构预述
|
程序员 Windows
1024 程序员必备好物推荐(vscode插件)|我和我的“格子衫”
今天正是个好日子,1024 程序员节。 朋友圈都是别人的公司送霸王洗发水之类的,而我在公司通宵加班。 但是我知道,这是通往大佬的唯一途径。
263 0
1024 程序员必备好物推荐(vscode插件)|我和我的“格子衫”
你见过这么好看的条形图吗?3步就搞定!(一)
你见过这么好看的条形图吗?3步就搞定! (一)
你见过这么好看的条形图吗?3步就搞定!(一)
|
编译器 C++
CTK-001-编译
CTK编译 参考链接:https://blog.csdn.net/blackwoodcliff/article/details/107624047?utm_medium=distribute.pc_relevant.none-task-blog-baidujs_title-5&spm=1001.2101.3001.4242
210 0
CTK-001-编译
|
数据采集 机器学习/深度学习 云安全
怎样用CDN防篡改、抗攻击、控内容?一份CDN安全指南请查收
CDN是业界公认的加速网站访问效率、提升用户体验的内容分发加速产品,也是互联网重要基础设施之一。阿里云CDN除了传统缓存、优化保障访问质量外,也天然具备边缘安全的优势。在安全问题更严峻、更频发、更复杂的互联网态势之下,加持安全防护的能力已经逐渐成为新一代CDN的标配。
3515 0
怎样用CDN防篡改、抗攻击、控内容?一份CDN安全指南请查收

热门文章

最新文章