bootstrap3使用bootstrap datetimepicker日期插件


Posted in Javascript onMay 24, 2017

没用过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参数解释,可以自己设置试一下

$(‘.form_date').datetimepicker({ 
language: ‘zh-CN', 
weekStart: 1, 
todayBtn: 1,//显示为今天的按钮,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不能在点击按钮后动态生成。
只好在页面最初展示的时候将所有数据中条数最多的查询出来,放在页面上:(红色部分为相关代码)

int count = 0;
   //将查询结果做处理,如参数字典转换
   for(Service s:serviceList){

    //资质字段若不为空,将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.setOutDate(outDateString);
    }

并在页面上使用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查询后循环赋值的代码就不贴了,效果图如下:(有一个问题是时间选择框不和时间显示在一行,如有大神能帮忙解决的话不胜感激!!)

bootstrap3使用bootstrap datetimepicker日期插件

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Valerio 发布了 Mootools
Sep 23 Javascript
javascript 特殊字符串
Feb 25 Javascript
7个Javascript地图脚本整理
Oct 20 Javascript
自定义右键属性覆盖浏览器默认右键行为实现代码
Feb 02 Javascript
jQuery.extend()的实现方式详解及实例
Jun 29 Javascript
jQuery中prevAll()方法用法实例
Jan 08 Javascript
html的DOM中Event对象onabort事件用法实例
Jan 21 Javascript
jQuery Jsonp跨域模拟搜索引擎
Jun 17 jQuery
node通过express搭建自己的服务器
Sep 30 Javascript
详解在React项目中安装并使用Less(用法总结)
Mar 18 Javascript
js JSON.stringify()基础详解
Jun 19 Javascript
js+css3实现炫酷时钟
Aug 18 Javascript
微信小程序本地缓存数据增删改查实例详解
May 24 #Javascript
详解微信小程序 通过控制CSS实现view隐藏与显示
May 24 #Javascript
jquery Form轻松实现文件上传
May 24 #jQuery
微信小程序封装http访问网络库实例代码
May 24 #Javascript
Bootstrap下拉菜单更改为悬停(hover)触发的方法
May 24 #Javascript
微信小程序 生命周期函数详解
May 24 #Javascript
很棒的vue弹窗组件
May 24 #Javascript
You might like
php mysql数据库操作分页类
2008/06/04 PHP
php浏览历史记录的方法
2015/03/10 PHP
PHP数组遍历的几种常见方式总结
2019/02/15 PHP
php进行md5加密简单实例方法
2019/09/19 PHP
js window.onload 加载多个函数的方法
2009/11/02 Javascript
jquery.boxy插件的iframe扩展代码
2010/07/02 Javascript
在vs2010中调试javascript代码方法
2011/02/11 Javascript
autoPlay 基于jquery的图片自动播放效果
2011/12/07 Javascript
js setTimeout 常见问题小结
2013/08/13 Javascript
浅析用prototype定义自己的方法
2013/11/14 Javascript
JS冒泡事件的快速解决方法
2013/12/16 Javascript
css+js实现部分区域高亮可编辑遮罩层
2014/03/04 Javascript
禁用Enter键表单自动提交实现代码
2014/05/22 Javascript
JS JQUERY实现滚动条自动滚到底的方法
2015/01/09 Javascript
js常用系统函数用法实例分析
2015/01/12 Javascript
jQuery实现连续动画效果实例分析
2015/10/09 Javascript
JavaScript文档碎片操作实例分析
2015/12/12 Javascript
jQuery多级联动下拉插件chained用法示例
2016/08/20 Javascript
JS判断指定dom元素是否在屏幕内的方法实例
2017/01/23 Javascript
element上传组件循环引用及简单时间倒计时的实现
2018/10/01 Javascript
微信小程序和H5页面间相互跳转代码实例
2019/09/19 Javascript
jQuery插件simplePagination的使用方法示例
2020/04/28 jQuery
[01:03:38]2014 DOTA2国际邀请赛中国区预选赛5.21 CNB VS CIS
2014/05/22 DOTA
Django之创建引擎索引报错及解决详解
2019/07/17 Python
Python之关于类变量的两种赋值区别详解
2020/03/12 Python
Python实现迪杰斯特拉算法并生成最短路径的示例代码
2020/12/01 Python
AHAVA美国官方网站:死海海泥护肤品牌
2016/10/18 全球购物
在家更换处方镜片:Lensabl
2019/05/01 全球购物
介绍一下Linux内核的排队自旋锁
2014/01/04 面试题
电大自我鉴定
2013/10/27 职场文书
给物业的表扬信
2014/01/21 职场文书
学生手册评语
2014/05/05 职场文书
工会主席事迹材料
2014/06/03 职场文书
企业安全生产责任书范本
2014/07/28 职场文书
离婚协议书范文2015
2015/01/26 职场文书
2015年试用期工作总结范文
2015/05/28 职场文书