下载地址及文档参考：/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 view1 or 'day' for the day view2 or 'month' for month view (the default)3 or 'year' for the 12-month overview4 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("-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});
