bootbox上的浮层弹出如何加上datepicker
bootbox和datepicker都是插件,我想要做的需求大致长这样:
我希望使用bootbox弹出的对话框中能弹出一个截止时间的选择框,这个选择框使用datepicker来做。
看了下这个帖子:
难点在于:
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(); } } }); } } } }); }

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
Spring MVC exception - Invoking request method resulted in exception :...
最近在线上系统发现下面的异常信息: 2014-10-11 11:14:09 ERROR [org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerExceptionResolver.doResolveException(143)]- Invoking request method resulted in exception : public static native long java.lang.System.currentTimeMillis() java.lang.IllegalArgumentException: Invalid handler method return value: 1412997249242 at org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerExceptionResolver.getModelAndView(AnnotationMethodHandlerExceptionReso...
- 下一篇
php的memcache和memcached扩展区别
老生长谈的问题了。我这里就整理一下。 memcache的文档在:http://pecl.php.net/package/memcache memcached的文档在:http://pecl.php.net/package/memcached 首先看下时间,memcache最早是在2004年2月开发的,最后更新是在2013年4月,而memcached最早是在2009年1月开发的,最后更新是在2014年1月更新的。所以memcache的历史比memcached早。 在安装memcache扩展的时候并不要求安装其他东东,但是在安装memcached的时候会要求你安装libmemcached,问题来了,libmemcached是memcache的C客户端,它具有的优点是低内存,线程安全等特点。比如新浪微博之前就全面将php的memcache替换成php的memcached,在高并发下,稳定性果断提高。 memcache的方法列表在:http://cn2.php.net/memcache memcached的方法列表在:http://www.php.net/manual/zh/book.me...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- Springboot2将连接池hikari替换为druid,体验最强大的数据库连接池
- CentOS8安装MyCat,轻松搞定数据库的读写分离、垂直分库、水平分库
- Windows10,CentOS7,CentOS8安装Nodejs环境
- CentOS7设置SWAP分区,小内存服务器的救世主
- CentOS7,CentOS8安装Elasticsearch6.8.6
- CentOS8安装Docker,最新的服务器搭配容器使用
- 设置Eclipse缩进为4个空格,增强代码规范
- Docker快速安装Oracle11G,搭建oracle11g学习环境
- SpringBoot2整合MyBatis,连接MySql数据库做增删改查操作
- CentOS7编译安装Gcc9.2.0,解决mysql等软件编译问题