下载地址及文档参考：http://www.bootcss.com/p/bootstrap-datetimepicker/
解压后 只需要 css 和 js 文件夹 放到项目中，引入即可
若使用国际化中文： js初始化时 必须加入：language: ‘zh-CN’
<link href="static/bootstrap-datetimepicker/css/bootstrap-datetimepicker.css" rel="stylesheet">
<script src="static/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js"></script>
<!--国际化：使用中文 -->
<script type="text/javascript" src="static/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script> 一、选项（方法和事件查文档）：
format
String. 默认值: ‘mm/dd/yyyy’
weekStart
Integer. 默认值：0
一周从哪一天开始。0（星期日）到6（星期六）
startDate
Date. 默认值：开始时间
可以选择的最早日期；将禁用所有较早日期。
endDate
Date. 默认值：结束时间
可以选择的最晚日期；所有较迟的日期都将被禁用。
daysOfWeekDisabled
String, Array. 默认值: ”, []
一周中应禁用的天数。值为0（星期日）到6（星期六）。多个值应以逗号分隔。示例：禁用周末：“0,6”或[0,6]。
autoclose
Boolean. 默认值：false
当选择一个日期之后是否立即关闭此日期时间选择器。
startView
Number, String. 默认值：2, ‘month’
日期时间选择器打开之后首先显示的视图。 可接受的值：
- 0 or ‘hour’ for the hour view
- 1 or ‘day’ for the day view
- 2 or ‘month’ for month view (the default)
- 3 or ‘year’ for the 12-month overview
- 4 or ‘decade’ for the 10-year overview. Useful for date-of-birth datetimepickers.
minView
Number, String. 默认值：0, ‘hour’
日期时间选择器所能够提供的最精确的时间选择视图。
maxView
Number, String. 默认值：4, ‘decade’
日期时间选择器最高能展示的选择范围视图。
todayBtn
Boolean, “linked”. 默认值: false
如果此值为true 或 “linked”，则在日期时间选择器组件的底部显示一个 “Today” 按钮用以选择当前日期。如果是true的话，”Today” 按钮仅仅将视图转到当天的日期，如果是”linked”，当天日期将会被选中。
todayHighlight
Boolean. 默认值: false
如果为true, 高亮当前日期。
language
String. 默认值: ‘en’
forceParse
forceParse
Boolean. 默认值: true
当选择器关闭的时候，是否强制解析输入框中的值。也就是说，当用户在输入框中输入了不正确的日期，选择器将会尽量解析输入的值，并将解析后的正确值按照给定的格式format设置到输入框中。
minuteStep
Number. 默认值: 5
此数值被当做步进值用于构建小时视图。对于每个 minuteStep 都会生成一组预设时间（分钟）用于选择。
showMeridian
Boolean. 默认值: false
此选项将为日视图和小时视图启用子午线视图。
二、input使用：引入国际化中文js
1、基本使用: .form_datetime 类（可自定义选择器）， readonly 可选
图标引入自定义图标库（阿里的）：
<link rel="stylesheet" href="static/font/iconfont.css"> <form id="search_form" class="form-inline col-md-6">
<div class="form-group">
<table class="table table-bordered">
<tr>
<td>日期时间</td>
<td>
<div class="input-group">
<input type="text" class="form-control form_datetime" >
<span class="input-group-btn">
<button class="btn btn-default " type="button" style="padding: 5px 10px;">
<span class="iconfont icon-rili"></span>
</button>
</span>
</div>
</td>
</tr>
</table>
</div>
</form>1) 日期时间： format: “yyyy-mm-dd hh:ii:ss“
$(".form_datetime").datetimepicker({
language: "zh-CN",
format: "yyyy-mm-dd hh:ii:ss",
autoclose: true,
todayBtn: true
}); 
2）日期：format: “yyyy-mm-dd“
$(".form_datetime").datetimepicker({
language: "zh-CN",
format: "yyyy-mm-dd",
autoclose: true,
minView: "month"
});3) 年月：format: “yyyy-mm“
$(".form_datetime").datetimepicker({
language: "zh-CN",
format: "yyyy-mm",
autoclose: true,
startView: 4,
minView: "year"
}); 
4） 年：format: “yyyy“
$(".form_datetime").datetimepicker({
language: "zh-CN",
format: "yyyy",
autoclose: true,
startView: 4,
minView: "decade"
});5）时间：format: “hh:ii:ss” 间隔30分钟（自定义minuteStep）
$(".form_datetime").datetimepicker({
language: "zh-CN",
format: "hh:ii:ss",
autoclose: true,
startView: 1,
minuteStep: 30,
maxView: "hour"
}); 
2、 日期范围：
$(".form_datetime").datetimepicker({
language: "zh-CN",
format: "yyyy-mm-dd",
autoclose: true,
minView: "month",
startDate: new Date(),
endDate: new Date("2019-02-26".replace(/-/g, "/"))
}); 
3、 开始时间与结束时间联动范围：
<form id="search_form" class="form-inline col-md-6">
<div class="form-group">
<table class="table table-bordered">
<tr>
<td>开始日期</td>
<td>
<div class="input-group">
<input type="text" class="form-control start_datetime" >
<span class="input-group-btn">
<button class="btn btn-default " type="button" style="padding: 5px 10px;">
<span class="iconfont icon-rili"></span>
</button>
</span>
</div>
</td>
<td>结束日期</td>
<td>
<div class="input-group">
<input type="text" class="form-control end_datetime" >
<span class="input-group-btn">
<button class="btn btn-default " type="button" style="padding: 5px 10px;">
<span class="iconfont icon-rili"></span>
</button>
</span>
</div>
</td>
</tr>
<tr>
<td>日期联动范围</td>
<td colspan="3">
<div class="input-group">
<input type="text" class="form-control start_datetime" placeholder="开始日期">
<span class="input-group-addon"> to </span>
<input type="text" class="form-control end_datetime" placeholder="结束日期">
</div>
</td>
</tr>
</table>
</div>
</form> 
$(".start_datetime").datetimepicker({
language: "zh-CN",
format: "yyyy-mm-dd",
weekStart: 1, /*以周一为一周的开始，默认是周日(0)*/
autoclose: true,
minView: "month",
todayBtn: true
}).on("changeDate",function(ev){ //值改变事件
//选择的日期不能大于第二个日期控件的日期
if(ev.date){
$(".end_datetime").datetimepicker('setStartDate', new Date(ev.date.valueOf()));
}else{
$(".end_datetime").datetimepicker('setStartDate',null);
}
});
$(".end_datetime").datetimepicker({
language: "zh-CN",
format: "yyyy-mm-dd",
weekStart: 1, /*以周一为一周的开始，默认是周日(0)*/
autoclose: true,
minView: "month",
todayBtn: true
}).on("changeDate",function(ev){ //值改变事件
//选择的日期不能小于第一个日期控件的日期
if(ev.date){
$(".start_datetime").datetimepicker('setEndDate', new Date(ev.date.valueOf()));
}else{
$(".start_datetime").datetimepicker('setEndDate',new Date());
}
});三、component使用：引入国际化中文js
1、 基本日期时间使用，format 自定义
<form id="search_form" class="form-inline col-md-6">
<div class="form-group">
<table class="table table-bordered">
<tr>
<td>日期时间</td>
<td>
<div class="input-group date form_datetime" data-date-format="yyyy-mm-dd hh:ii:ss" >
<input class="form-control" size="20" type="text" value="" readonly>
<span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
<span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
</div>
</td>
</tr>
</table>
</div>
</form>
$(".form_datetime").datetimepicker({
language: "zh-CN",
format: "yyyy-mm-dd hh:ii:ss",
autoclose: true,
showMeridian: 1,
todayBtn: true
}); 
