bootstrap datetimepicker的用法以及小箭头不能显示的问题
2018-03-20 15:55
1261 查看
使用时间控件时需要把CSS和js引用都加上,加上bootstrap-datetimepicker.zh-CN.js在使用的时候才可以选择使用中文。
我使用的是bootstrap-datetimepicker+bootstrap v3,但这个插件使用的时候,并没有和V3相匹配,仍然调用的是bootstrap V2的图标,代码是:
![](https://oscdn.geek-share.com/Uploads/Images/Content/201803/f788f78791190a75430f69f936e7bd7c)
解决方法:
第一种方法: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//今日按钮
});
<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//今日按钮
});
相关文章推荐
- bootstrap-datetimepicker 时间表箭头不能显示
- bootstrap-datetimepicker 时间表箭头不能显示
- bootstrap中datetimepicker显示1899问题
- 关于bootstrap datetimepicker的用法以及小箭头消失的问题(已解决)
- datetimepicker bootstrap的时间插件显示位置问题及其他配置
- bootstrap datetimepicker 左右箭头不显示 icon-arrow-left
- bootstrap datetimepicker定位不准确问题
- bootstrap-datetimepicker时间段区间选择的问题
- Bootstrap 3时间控件datetimepicker的时区及多语言问题
- bootstrap datetimepicker定位不准确问题
- struts2.1.6 datetimepicker标签不能使用的问题解决
- 关于Bootstrap日期控件datetimepicker被模态框等遮罩在底部的问题及解决办法。
- bootstrap datetimepicker 用法+demo案例下载
- bootstrap datetimepicker 日期控件清空问题
- bootstrap datetimepicker 中文显示
- bootstrap-datetimepicker 显示月
- struts2.1.6 s:datetimepicker标签不能使用的问题解决
- bootstrap-datetimepicker的使用方法和兼容问题
- Android中VideoView播放视频不能充满屏幕以及视频上的view与视频不同步显示的问题
- ActionBar 不能显示logo 的问题 ,背景颜色的修改, 以及ActionBar 的官方guide