bootbox上的浮层弹出如何加上datepicker-阿里云开发者社区

开发者社区> 轩脉刃> 正文

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();
                            }
                        }
                    });
                }
            }
        }
    });
}
复制代码

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
4014 0
阿里云服务器ECS远程登录用户名密码查询方法
阿里云服务器ECS远程连接登录输入用户名和密码,阿里云没有默认密码,如果购买时没设置需要先重置实例密码,Windows用户名是administrator,Linux账号是root,阿小云来详细说下阿里云服务器远程登录连接用户名和密码查询方法
2178 0
使用OpenApi弹性释放和设置云服务器ECS释放
云服务器ECS的一个重要特性就是按需创建资源。您可以在业务高峰期按需弹性的自定义规则进行资源创建,在完成业务计算的时候释放资源。本篇将提供几个Tips帮助您更加容易和自动化的完成云服务器的释放和弹性设置。
7586 0
阿里云服务器安全组设置内网互通的方法
虽然0.0.0.0/0使用非常方便,但是发现很多同学使用它来做内网互通,这是有安全风险的,实例有可能会在经典网络被内网IP访问到。下面介绍一下四种安全的内网互联设置方法。 购买前请先:领取阿里云幸运券,有很多优惠,可到下文中领取。
9307 0
windows server 2008阿里云ECS服务器安全设置
最近我们Sinesafe安全公司在为客户使用阿里云ecs服务器做安全的过程中,发现服务器基础安全性都没有做。为了为站长们提供更加有效的安全基础解决方案,我们Sinesafe将对阿里云服务器win2008 系统进行基础安全部署实战过程! 比较重要的几部分 1.
4964 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
10716 0
阿里云服务器ECS登录用户名是什么?系统不同默认账号也不同
阿里云服务器Windows系统默认用户名administrator,Linux镜像服务器用户名root
723 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
2901 0
+关注
290
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载