bootstrap3使用bootstrap datetimepicker日期插件

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

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

时间: 2017-05-22

AngularJs中Bootstrap3 datetimepicker使用实例

关于datetimepicker的使用,参考:http://www.jb51.net/article/99896.htm 在AngularJs中使用实例: HTML代码: <div class="container" ng-app="myApp" ng-controller="myCtrl"> <div class="row"> <div class='col-sm-6'> <div

Bootstrap3 datetimepicker控件使用实例

Bootstrap3 日期+时间选择控件的使用方法,供大家参考,具体内容如下 1.支持日期选择,格式设定 2.支持时间选择 3.支持时间段选择控制 4.支持中文 官网地址:http://eonasdan.github.io/bootstrap-datetimepicker/ git地址:https://github.com/Eonasdan/bootstrap-datetimepicker moment语言包:https://github.com/moment/moment datetimepi

bootstrap-datetimepicker实现只显示到日期的方法

本文实例讲述了bootstrap-datetimepicker实现只显示到日期的方法.分享给大家供大家参考,具体如下: bootstrap-datetimepicker 一般都是设置到时分秒,有时候并不需要,怎么处理呢? minView: "month", //选择日期后,不会再跳转去选择时分秒 1.引入 <link href="Public/css/bootstrap.min.css" type="text/css" rel="

bootstrap datetimepicker日期插件超详细使用方法介绍

本文实例为大家分享了bootstrap datetimepicker日期插件的简单使用,供大家参考,具体内容如下 首先在文件头部引入必要的文件: <link rel="stylesheet" href="Css/bootstrap-datetimepicker.min.css" rel="external nofollow" > <script src="Js/bootstrap-datetimepicker.js&q

Bootstrap 设置datetimepicker在屏幕上面弹出设置方法

datetimepicker默认是在输入框下面弹出的,但是遇到输入框在屏幕下面时,日期选择框会有一部分在屏幕下面,显示不了,因此需要能够从上面弹出.设置很简单,在初始话中: $('.form_date').datetimepicker({ language: 'zh-CN', weekStart: 1, todayBtn: 1, autoclose: 1, todayHighlight: 1, startView: 2, minView: 2, forceParse: 0, pickerPosi

bootstrap datetimepicker实现秒钟选择下拉框

bootstrap datetimepicker插件没有秒钟选择器,如果要想选择的时间精确到秒没有办法控制,虽然可以配置format:'yyyy-mm-dd hh:ii:ss',会将秒钟添加到输入框中,但是无法控制秒钟数值,默认为当前客户端的时间的秒钟. 本示例修改bootstrap datetimepicker源代码,如果配置了显示秒钟format:'......ss',将会给分钟选择器层添加秒钟选择下拉框,可以自定义选择时间的秒钟部分,效果如下 bootstrap datetimepicke

angularjs封装bootstrap时间插件datetimepicker

背景:angular与jquery类库的协作 第三方类库中,不得不提的是大名鼎鼎的jquery,现在基本上已经是国内web开发的必修工具了.它灵活的dom操作,让很多web开发人员欲罢不能.再加上已经很成熟的jquery UI 库和大量jquery 插件,几乎是一个取之不尽用之不竭的宝库.然而,它是否能与angularjs结合呢? 很多angularjs原教旨主义者对此持否定态度.他们认为,既然已经使用了angularjs做web应用框架,那就必须避免其他类库的干扰,做纯净的MvvM模式应用.任

Bootstrap时间选择器datetimepicker和daterangepicker使用实例解析

在bootstrap中的时间选择器有两种:dateTimePicker和dateRangePicker 1.dateTimePicker好像是官方嫡插件: 需要的文件: <link rel="stylesheet" href="css/bootstrap-datetimepicker.min.css"> <script src="js/bootstrap-datetimepicker.min.js"></script

bootstrap datetimepicker日期插件使用方法

本文实例为大家分享了bootstrap datetimepicker日期插件的简单使用,供大家参考,具体内容如下 首先在文件头部引入必要的文件: <link rel="stylesheet" href="Css/bootstrap-datetimepicker.min.css"> <script src="Js/bootstrap-datetimepicker.js"></script> 想用中文显示,加入bo

基于bootstrap-datetimepicker.js不支持IE8的快速解决方法

实例如下: if (!Array.prototype.indexOf) Array.prototype.indexOf = function (elt /*, from*/) { var len = this.length >>> 0; var from = Number(arguments[1]) || 0; from = (from < 0) ? Math.ceil(from) : Math.floor(from); if (from < 0) from += len;

基于BootStrap multiselect.js实现的下拉框联动效果

背景:当option特别多时,一般的下拉框选择起来就有点力不从心了,所以使用multiselect是个很好的选择,可以通过输入文字来选择选项很方便,但是有一个需要下拉框联动,网上找了半天才找到解决方法,在此分享一下 1.先引入 <script src="~/Assets/js/bootstrap-multiselect.min.js"></script> <link href="~/Assets/css/bootstrap-multiselect

JQuery.validate在ie8下不支持的快速解决方法

一.在ie8下回有问题的代码 1.JQuery.validate验证框架是通过页面form表单提交验证<input/>标签中输入是否符合自己的规则的 <form id="cardTypeFrm"> <table width="100%" cellspacing="0" cellpadding="0" class="table_pzh"> <tbody> <

layui+jquery支持IE8的表格分页方法

工具(框架.插件) 1.layui-v1.0.9 2.jquery-1.8.3 代码 1.jsp代码(可忽略jsp部分,转成html) <%@ page language="java" contentType="text/html; charset=utf-8"%> <%@ include file="/common/include/taglib.jsp"%> <% <html> <head>

Bootstrap Table表格一直加载(load)不了数据的快速解决方法

bootstrap-table是一个基于Bootstrap风格的强大的表格插件神器,官网:http://bootstrap-table.wenzhixin.net.cn/zh-cn/ 这里列出遇到的一个小问题:Bootstrap Table表格一直加载不了数据. $("#button").click(function(){ var name=$("input[name='name']").val(); $('#table').bootstrapTable('load

关于ckeditor在bootstrap中modal中弹框无法输入的解决方法

当在bootstrap的modal中使用ckeditor时,使用ckeditor中带弹框的功能时无法输入问题. 解决方法:在jquery和bootstrap加载之后引入fix的js,js内容: var $modalElement = this.$element; $(document).on('focusin.modal', function (e) { var $parent = $(e.target.parentNode); if ($modalElement[0] !== e.target

ios 不支持 iframe 的完美解决方法(兼容iOS&安卓)

最近做微信公众号页面,因为入口不同,需要把公共页面抽取出来,然后根据不同的值,传递给后台不同的入口.刚开始用iframe页面嵌套(第一次尝试使用),但发现iOS系统对iframe嵌套页面的高度和定位控制的不到位,具体表现为,当嵌套的子页面的高度大于父页面的高度,且子页面中有触发弹框事件时,这时,如果子页面高度远远大于父页面高度,就会出现弹框找不到的情况,其实可能是在视口以下,弹框的位置只是相对于子页面来定位,并没有相对于视口定位. 尝试了好多种方法,均不理想,而安卓系统则表现良好,于是想到,iO

js和jq使用submit方法无法提交表单的快速解决方法

昨天,在做一个表单异步提交内容的时候,遇到很奇怪的问题,submit()方法无法进行提交,每次提交都是把 当前给刷新了,网络抓包发现,每次都是 get方式去获取 当前页面,完全没有post 请求,想着以前 遇上这样的问题 都是因为 表单中 有 name 或者 id 这些命名跟submit 有冲突,但是检查了几次,始终没有发现 名字冲突,所以这个可能性被排除. 平常自己做触发按钮,基本不用a 标签,但是昨天不知道什么 问题,竟然用了 a 而且还给了 href 为空,由于这个a 的class 有多个

js鼠标单击和双击事件冲突问题的快速解决方法

情况一 如果在一个DOM对象上同时绑定单击(click)和双击(dblclick)事件,当在这个DOM对象上发生双击事件时,第一次点击(click)会 触发一次单击(click)事件,第二次点击(连续的)也会触发双击(dblclick)事件,还是会触发单击(click)事件(IE7与 firefox). 解决方法: <button onclick="test(1)" ondblclick="test(2)"></button> <scr

IE9 IE8 ajax跨域问题的快速解决方法

网上解决办法均是 在发起请求之前添加 jQuery.support.cors=true;但是,线下测试,是ok的,一放到服务器上,又出现了新的eroor:readyState: 0, status: 0, statusText: "Error: 拒绝访问... 最后,问题是这样解决的,点击IE浏览器的的"工具->Internet 选项->安全->自定义级别"将"其他"选项中的"通过域访问数据源"选中为"启用&