Bootstrap插件——bootstrap-datetimepicker基本使用

 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         }