欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

bootstrap3使用bootstrap datetimepicker日期插件

程序员文章站 2023-11-22 09:38:10
没用过bootstrap2,所以之间的差异不清楚,但是看往上基本上都是说bootstrap2与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查询后循环赋值的代码就不贴了,效果图如下:(有一个问题是时间选择框不和时间显示在一行,如有大神能帮忙解决的话不胜感激!!)

bootstrap3使用bootstrap datetimepicker日期插件

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