做h5网页的时候会遇到时间选择。可以使用bootstrap的datepicker来实现实现选择时间的功能
附datepicker源码链接:
https://github.com/uxsolutions/bootstrap-datepicker
具体使用如下:
1、需要进行引入样式文件ootstrap-datepicker3.min.css和js文件bootstrap-datepicker.js文件和中文js文件bootstrap-datepicker.zh-CN.js'文件
<link rel="stylesheet" href="css/bootstrap-datepicker3.min.css" />
<script src="js/bootstrap-datepicker.min.js"></script>
<script src="js/bootstrap-datepicker.zh-CN.min.js"></script>
2、html
<div class="col-md-5 " id="sanbox-container">
<input data-format="yyyy-MM-dd" type="text" class="appio-start form-control text-center rounded-pill">
</div>
input输入框中的data-format属性是为了格式化时间(datepicker可选择的是时间格式有三种:yyyy-MM-dd ,yyyy-MM-dd hh:ii , yyyy-MM-dd hh:ii:ss ),格式化时间需要引入moment.js文件,否则在js中添加格式化时间的属性会报错。
3、js
$('#sanbox-container input').datepicker({
format: 'yyyy-mm-dd',//格式化时间
ignoreReadonly: true,//移动端选择时间时禁止键盘弹出
endDate:endTime,//结束时间
language: 'zh-CN', //中文
});