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 相关文章推荐
JS中window.open全屏命令解析及使用示例
Dec 11 Javascript
js写的评论分页(还不错)
Dec 23 Javascript
JavaScript判断用户是否对表单进行了修改的方法
Mar 18 Javascript
javascript排序函数实现数字排序
Jun 26 Javascript
Javascript的this用法
Jan 16 Javascript
利用Vue.js+Node.js+MongoDB实现一个博客系统(附源码)
Apr 24 Javascript
深入理解ES6学习笔记之块级作用域绑定
Aug 19 Javascript
详解如何使用babel进行es6文件的编译
May 29 Javascript
高效jQuery选择器的5个技巧实例分析
Nov 26 jQuery
详解ES6 CLASS在微信小程序中的应用实例
Apr 24 Javascript
vue使用自定义事件的表单输入组件用法详解【日期组件与货币组件】
Jun 01 Javascript
vue项目在webpack2实现移动端字体自适配功能
Jun 02 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
关于Zend Studio 配色方案插件的介绍
2013/06/24 PHP
PHP实现微信红包金额拆分试玩的算法示例
2018/04/07 PHP
在IE 浏览器中使用 jquery的fadeIn() 效果 英文字符字体加粗
2011/06/02 Javascript
Javascript生成json的函数代码(可以用php的json_decode解码)
2012/06/11 Javascript
jQuery javaScript捕获回车事件(示例代码)
2013/11/07 Javascript
JavaScript中的Math 使用介绍
2014/04/21 Javascript
浅析javascript操作 cookie对象
2014/12/26 Javascript
在JS方法中返回多个值的方法汇总
2015/05/20 Javascript
jQuery Pagination分页插件_动力节点Java学院整理
2017/07/17 jQuery
写给vue新手们的vue渲染页面教程
2017/09/01 Javascript
深入浅出webpack教程系列_安装与基本打包用法和命令参数详解
2017/09/10 Javascript
layui table去掉右侧滑动条的实现方法
2019/09/05 Javascript
vue实现移动端触屏拖拽功能
2020/08/21 Javascript
[00:12]DAC2018 no[o]ne亮相SOLO赛 他是否如他的id一样无人可挡?
2018/04/06 DOTA
Python编程实现生成特定范围内不重复多个随机数的2种方法
2017/04/14 Python
对python多线程中互斥锁Threading.Lock的简单应用详解
2019/01/11 Python
python 阶乘累加和的实例
2019/02/01 Python
Python3最长回文子串算法示例
2019/03/04 Python
python接口自动化(十七)--Json 数据处理---一次爬坑记(详解)
2019/04/18 Python
使用TensorFlow实现简单线性回归模型
2019/07/19 Python
Python2与Python3的区别点整理
2019/12/12 Python
Django 批量插入数据的实现方法
2020/01/12 Python
python中用ctypes模拟点击的实例讲解
2020/11/26 Python
html5中svg canvas和图片之间相互转化思路代码
2014/01/24 HTML / CSS
美国香薰蜡烛品牌:PADDYWAX
2018/10/06 全球购物
德国汽车零件和汽车配件网上商店:kfzteile24
2018/11/14 全球购物
英国电子产品购物网站:Tech in the basket
2019/11/08 全球购物
机修工岗位职责
2013/11/24 职场文书
考生诚信考试承诺书
2014/05/23 职场文书
计算机网络专业求职信
2014/06/05 职场文书
领导干部作风建设剖析材料
2014/10/11 职场文书
2014年人力资源工作总结
2014/11/19 职场文书
婚庆公司开业主持词
2015/06/30 职场文书
驻村工作简报
2015/07/20 职场文书
聘任书范文大全
2015/09/21 职场文书
2016优秀大学生个人事迹材料范文
2016/03/01 职场文书