对应上面的三个时间选择器,写法如下:
首先引入css和js:
<link rel="external nofollow" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"><link rel="external nofollow" href="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" rel="stylesheet"> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script><script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><script src="https://cdn.bootcss.com/moment.js/2.22.0/moment-with-locales.js"></script><script src="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>然后html部分:
<div class="row"> <div class='col-sm-6'> <div class="form-group"> <label>选择开始时间:</label> <!--指定 date标记--> <div class='input-group date' id='datetimepicker1'> <input type='text' class="form-control" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> </div> <div class='col-sm-6'> <div class="form-group"> <label>选择结束时间:</label> <!--指定 date标记--> <div class='input-group date' id='datetimepicker2'> <input type='text' class="form-control" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> </div> <div class='col-sm-6'> <div class="form-group"> <label>选择结束时间:</label> <!--指定 date标记--> <div class='input-group date' id='datetimepicker3'> <input type='text' class="form-control" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> </div> </div>最后js部分:
$('#datetimepicker1').datetimepicker({ format: 'YYYY-MM-DD', locale: moment.locale('zh-cn'), defaultDate: "1990-1-1" });$(function () { $('#datetimepicker1').datetimepicker({ format: 'YYYY-MM-DD', locale: moment.locale('zh-cn') }); $('#datetimepicker2').datetimepicker({ format: 'HH:mm', locale: moment.locale('zh-cn') }); $('#datetimepicker3').datetimepicker({ format: 'YYYY-MM-DD HH:mm', locale: moment.locale('zh-tw') });});解释:
format
日期格式YYYY-MM-DD:2019-01-10
HH:mm24小时格式
hh:mm12小时格式
YYYY-MM-DD HH:mm 比如:2019-01-01 23:59
HH:mm:ss 带秒数的24小时格式
locale
时间地区zh-cn是中国参考:http://www.htmleaf.com/jQuery/Calendar-Date-Time-picker/201806095166.html