Bootstrap Timepicker使用

Bootstrap Timepicker使用最近写项目用到了时间插件,开始选择得是常用的BootstrapDatetimepicker,但是后来由于业务需要,只能选择时间而不能选择日期,所以最后又用了一下BootStrapTimepicker,所以今天就抽时间分享一下BootStrapTimepicker吧。要用Timepickr,首先自然是引入JS文件,这些在官网上可以下载,所以就不在废话了,直接上例子吧引入文件:

最近写项目用到了时间插件,开始选择得是常用的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>

初始化需要的属性在官网上也都有说明,个人感觉还是很方便的。下面是效果

Bootstrap Timepicker使用

ootstrap Timepicker

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/35161.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注