Hi,大家好,我是编程小6,很荣幸遇见你,我把这些年在开发过程中遇到的问题或想法写出来,今天说一说
bootstrap4 datetimepicker_bootstrap下载安装教程,希望能够帮助你!!!。
最近写项目用到了时间插件,开始选择得是常用的Bootstrap Datetimepicker,但是后来由于业务需要,只能选择时间而不能选择日期,所以最后又用了一下BootStrap Timepicker,所以今天就抽时间分享一下吧。
要用Timepickr,首先自然是引入JS文件,这些在官网上可以下载,所以就不在废话了,直接上例子吧
引入js和样式文件:
<link rel="stylesheet" href="${baseurl }/styles/datetimepicker/bootstrap-timepicker.min.css"/>
<script type="text/javascript" src="${baseurl }/scripts/bootstrap/datetimepicker/bootstrap-timepicker.min.js"></script>
HTML:
<div class="col-md-2" style="width: 15%; position: relative; float: left;" align="left">
<div class="input-group monday">
<input type="text" readonly="readonly" id="monday_s" class="form-control timepicker timepicker-default startTime">
</div>
</div>
<div style="width: 5%; position: relative; float: left;" align="center">
<p>-</p>
</div>
<div class="col-md-2" style="width: 15%; position: relative; float: left;" align="left">
<div class="input-group monday">
<input type="text" readonly="readonly" id="monday_e" class="form-control timepicker timepicker-default endTime">
</div>
</div>
上面的div就是插件的容器。上面的做完之后,只需要初始化一下就可以使用了:
<script type="text/javascript">
$(function() {
$('.timepicker').timepicker({
defaultTime:'9:00',
showMeridian:false,
});
});
</script>
初始化需要的属性在官网上也都有说明,个人感觉还是很方便的。下面是效果
今天的分享到此就结束了,感谢您的阅读,如果确实帮到您,您可以动动手指转发给其他人。
上一篇
已是最后文章
下一篇
已是最新文章