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 相关文章推荐
firefox和IE系列的相关区别整理 以备后用
Dec 28 Javascript
jquery.Ajax()方法调用Asp.Net后台的方法解析
Feb 13 Javascript
jquery.validate.js插件使用经验记录
Jul 02 Javascript
jQuery中siblings()方法用法实例
Jan 08 Javascript
jQuery实现分章节锚点“回到顶部”动画特效代码
Oct 23 Javascript
CKEditor无法验证的解决方案(js验证+jQuery Validate验证)
May 09 Javascript
Vue.js实现文章评论和回复评论功能
May 30 Javascript
JS实现加载时锁定HTML页面元素的方法
Jun 24 Javascript
JavaScript利用fetch实现异步请求的方法实例
Jul 26 Javascript
JS求1到任意数之间的所有质数的方法详解
May 20 Javascript
Vue SPA 初次进入加载动画实现代码
Nov 14 Javascript
vue 通过base64实现图片下载功能
Dec 19 Vue.js
微信小程序本地缓存数据增删改查实例详解
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函数
2006/12/06 PHP
解析PHP将对象转换成数组的方法(兼容多维数组类型)
2013/06/21 PHP
ThinkPHP上使用多说评论插件的方法
2014/10/31 PHP
php中实现字符串翻转的方法
2017/02/22 PHP
PHP面向对象多态性实现方法简单示例
2017/09/27 PHP
PHP实现提高SESSION响应速度的几种方法详解
2019/08/09 PHP
自写的jQuery异步加载数据添加事件
2014/05/15 Javascript
AngularJS入门教程之双向绑定详解
2016/08/18 Javascript
JavaScript reduce和reduceRight详解
2016/10/24 Javascript
JS自定义混合Mixin函数示例
2016/11/26 Javascript
jquery.flot.js简单绘制折线图用法示例
2017/03/13 Javascript
用vue构建多页面应用的示例代码
2017/09/20 Javascript
js使用文件流下载csv文件的实现方法
2019/07/15 Javascript
浅谈vue 组件中的setInterval方法和window的不同
2020/07/30 Javascript
Python抓取框架Scrapy爬虫入门:页面提取
2017/12/01 Python
为什么入门大数据选择Python而不是Java?
2018/03/07 Python
在Python中,不用while和for循环遍历列表的实例
2019/02/20 Python
django基础学习之send_mail功能
2019/08/07 Python
基于Numba提高python运行效率过程解析
2020/03/02 Python
python3 xpath和requests应用详解
2020/03/06 Python
keras处理欠拟合和过拟合的实例讲解
2020/05/25 Python
Python利用myqr库创建自己的二维码
2020/11/24 Python
大学生个人自我鉴定
2013/12/03 职场文书
应届毕业生个人求职自荐信
2014/01/06 职场文书
《长江之歌》教学反思
2014/04/17 职场文书
计算机毕业生求职信
2014/06/10 职场文书
超市促销活动总结
2014/07/01 职场文书
社区护士演讲稿
2014/08/27 职场文书
反腐倡廉影片观后感
2015/06/08 职场文书
《青山不老》教学反思
2016/02/22 职场文书
2016年学校“3.12”植树节活动总结
2016/03/16 职场文书
有关保护环境的宣传标语100条
2019/08/07 职场文书
Redis6.0搭建集群Redis-cluster的方法
2021/05/08 Redis
JavaScript如何优化逻辑判断代码详解
2021/06/08 Javascript
记一次Mysql不走日期字段索引的原因小结
2021/10/24 MySQL
JavaScript组合继承详解
2021/11/07 Javascript