时间:2021-05-28
没用过bootstrap2,所以之间的差异不清楚,但是看往上基本上都是说bootstrap2与bootstrap-datetimepicker的使用,之间会有不同,所以写下记录,如有不对之处,还请指正!
网上下载bootstrap-datetimepicker-master.zip(bootstrap-datetimepicker日期插件),bootstrap3.x
用法:
1.引入css文件
<link href="./bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen"><link href="../css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">2.引入js文件
<script type="text/javascript" src="./jquery/jquery-1.8.3.min.js" charset="UTF-8"></script><script type="text/javascript" src="./bootstrap/js/bootstrap.min.js"></script><script type="text/javascript" src="../js/bootstrap-datetimepicker.js" charset="UTF-8"></script><script type="text/javascript" src="../js/locales/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script><script type="text/javascript">$('.form_date').datetimepicker({ language: 'zh-CN', weekStart: 1, todayBtn: 1, autoclose: 1, todayHighlight: 1, startView: 2, minView: 2, forceParse: 0 });</script>3.页面的div
<div class="input-group date form_date col-md-5" data-date="" data-date-format="dd MM yyyy" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd"> <input class="form-control" size="16" type="text" value="" readonly> <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span> <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span></div>需要注意的点:
1.js参数解释,可以自己设置试一下
2.div必须位于js之前,或者说页面div在js之前加载
3.div中data-date-format属性与第二个input的id属性为一致,这样在选择时间后才会赋值,并传递给后台
至此就可以实现日期插件功能了。
但是,我的需求是,1.页面加载,2.点击某个按钮模态框显示,并ajax返回结果集,根据结果集来拼接出日期控件的个数。由于日期控件个数的不确定性,在试了各种方法之后发现,页面上的div不能在点击按钮后动态生成。
只好在页面最初展示的时候将所有数据中条数最多的查询出来,放在页面上:(红色部分为相关代码)
并在页面上使用jstl标签生成div,并都设成为不可见:
<c:forEach var="i" begin="1" end="${countQu }" step="1"> <tr> <td></td> <td style="width:60%"> <div class="input-group date form_date " style="display: none;" data-date="" data-date-format="yyyy-mm-dd" data-link-field="dtp_input${i }" data-link-format="yyyy-mm-dd"> <input id="" class="form-control" size="16" type="text" value="" readonly> <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span> </div> <input type="hidden" id="dtp_input${i }" name="qualifyDate_ser"/> <input type="hidden" id="" name="qualifyId_ser"/> </td> </tr> </c:forEach>ajax查询后循环赋值的代码就不贴了,效果图如下:(有一个问题是时间选择框不和时间显示在一行,如有大神能帮忙解决的话不胜感激!!)
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
自己写的一款基于bootstrap3和jquery的分页插件,初学jquery插件写法,写的很一般。拿出来献丑了。/***基于bootstrap3的jquery
日期插件bootstrap-datetimepicker在火狐下出现一条报错信息:TypeError:(intermediatevalue).toString(
BootstrapValidator是为Bootstrap3设计的一款表单验证jQuery插件,非常适合基于Bootstrap框架的网站。看作者的github,
一、下载bootstrap-datetimepicker时间选择器js,css文件。1.github地址:bootstrap-datetimepicker2.官
如何使用bootstrap日历datetimepicker插件?一、引入文件1、css样式2、js文件二、布局代码1、布局代码:三、js调用代码:$(funct