您的位置:首页 > Web前端 > BootStrap

bootstrap datetimepicker的用法以及小箭头不能显示的问题

2018-03-20 15:55 1261 查看
使用时间控件时需要把CSS和js引用都加上,加上bootstrap-datetimepicker.zh-CN.js在使用的时候才可以选择使用中文。
<script type="text/javascript" src="././js/public/bootstrap-datetimepicker.zh-CN.js"></script>

我使用的是bootstrap-datetimepicker+bootstrap v3,但这个插件使用的时候,并没有和V3相匹配,仍然调用的是bootstrap V2的图标,代码是:
<i class="icon-arrow-right"></i>



解决方法:
第一种方法:input的class值使用form-control就是说:在对应的input框中class中假日form-control这个类[html] view plain copy<input type="text" class="time-input form-control" id="startTime" placeholder="起始日期" name="begin_time" readonly class="form_datetime">  

第二种方法:datetimepicker的options里把bootcssVer的值直接设为3,否则datetimepicker不会显示出箭头bootcssVer: 3,eg:[html] view plain copy<input id="dtStart" name="dtStart" type="text" style="width:130px"></input>  
[javascript] view plain copy      $("#dtStart").datetimepicker({  minView: "day",  
          bootcssVer:3,  
          format : "yyyy-mm-dd hh:00",//日期格式  
          language: 'zh-CN',//中文显示

          autoclose:true,//选中关闭  
          todayBtn: true//今日按钮  
      });  
  
  
$("#dtEnd").datetimepicker({  minView: "month",//设置只显示到月份  
          bootcssVer:3,  
          format : "yyyy-mm-dd",//日期格式  
          autoclose:true,//选中关闭  
          todayBtn: true//今日按钮  
      });  
  
      $("#timeEnd").datetimepicker({    
          bootcssVer:3,  
          format : "hh",//日期格式  
          startView: 1,  
          minuteStep: 60,  
          minView: "day",  
          autoclose:true,//选中关闭  
          todayBtn: true//今日按钮  
     });  
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息