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="请选择开始时间" >
8 <b >~</b>
9 <input type="text" class="form-control" placeholder="请选择结束时间" >
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 }