1 1.首先需要引入css,js文件
2
3 样式文件
4
5 <link rel="stylesheet" href="../bower_components/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css">
6
7 js文件
8
9 <script src="../bower_components/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.min.js"></script>
10
11 语言文件
12 <script src="../bower_components/bootstrap-datetimepicker-master/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
1 2.
2
3 HTML结构
4
5 <li>
6 <span>注册时间:</span>
7 <input type="text" class="form-control" placeholder="请选择开始时间" id="start_time">
8 <b style="margin: 0 10px;">~</b>
9 <input type="text" class="form-control" placeholder="请选择结束时间" id="end_time">
10 <i></i>
11 </li>
1 3.初始化
2
3 // 时间选择
4 time() {
5 $('#start_time').datetimepicker({
6 格式化：年月日时分秒
7 format: 'yyyy-mm-dd hh:ii',
8 选择后自动关闭
9 autoclose: true,
10 分钟的步长
11 minuteStep: 1,
12 语言
13 language: 'zh-CN',
14 显示今天按钮
15 todayBtn: true,
16 层级
17 bootcssVer: 3,
18 }).on('changeDate', function (e) {
19 var startDate = $('#start_time').val();
20 $("#end_time").datetimepicker('setStartDate', startDate);
21 $("#start_time").datetimepicker('hide');
22 });;
23 $('#end_time').datetimepicker({
24 format: 'yyyy-mm-dd hh:ii',
25 autoclose: true,
26 minuteStep: 1,
27 language: 'zh-CN',
28 todayBtn: true,
29 bootcssVer: 3,
30 }).on('changeDate', function (e) {
31 var returnDate = $("#end_time").val();
32 $("#start_time").datetimepicker('setReturnDate', returnDate);
33 $("#end_time").datetimepicker('hide');
34 });
35 }
