微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

bootstrap3使用bootstrap datetimepicker日期插件

没用过bootstrap2,所以之间的差异不清楚,但是看往上基本上都是说bootstrap2与bootstrap-datetimepicker的使用,之间会有不同,所以写下记录,如有不对之处,还请指正!

网上下载bootstrap-datetimepicker-master.zip(bootstrap-datetimepicker日期插件),bootstrap3.x

用法

1.引入css文件

rush:xhtml;">

2.引入js文件

rush:xhtml;">

3.页面的div

rush:xhtml;">

需要注意的点:

1.js参数解释,可以自己设置试一下

rush:js;"> $(‘.form_date').datetimepicker({ language: ‘zh-CN',//显示为今天的按钮,0无1有 autoclose: 1,//单击时间后日历框是否自动关闭,1关闭,0不关闭 todayHighlight: 1,//今天高亮显示 startView: 2,//展示的样式,1小时,2日 minView: 2,//选取到的时间,2天,1小时 forceParse: 0 });

2.div必须位于js之前,或者说页面div在js之前加载

3.div中data-date-format属性与第二个input的id属性为一致,这样在选择时间后才会赋值,并传递给后台 至此就可以实现日期插件功能了。

但是,我的需求是,1.页面加载,2.点击某个按钮模态框显示,并ajax返回结果集,根据结果集来拼接出日期控件的个数。由于日期控件个数的不确定性,在试了各种方法之后发现,页面上的div不能在点击按钮后动态生成。 只好在页面最初展示的时候将所有数据中条数最多的查询出来,放在页面上:(红色部分为相关代码)

//资质字段若不为空,将code转为name if(null != s.getOutDate() && !"".endsWith(s.getOutDate())){ String[] outDate = s.getOutDate().split(","); if(outDate.length>count){ count=outDate.length; } String outDateString = ""; if(outDate.length>0){ for(int i=0;i<outDate.length;i++){ Qualify qualify = qualifyServiceImpl.selectByPrimaryKey(outDate[i]); if(i !=0 ){ outDateString = outDateString+","; } outDateString = outDateString+qualify.getQualifyName(); } } if(count != 0){ request.setAttribute("countQu",count); } s.s<a href="https://www.jb51.cc/tag/eto/" target="_blank" class="keywords">eto</a>utDate(outDateString); }

并在页面上使用jstl标签生成div,并都设成为不可见:

rush:csharp;"> display: none;" data-date="" data-date-format="yyyy-mm-dd" data-link-field="dtp_input${i }" data-link-format="yyyy-mm-dd">

ajax查询后循环赋值的代码就不贴了,效果图如下:(有一个问题是时间选择框不和时间显示在一行,如有大神能帮忙解决的话不胜感激!!)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐