今天折腾了一下午和一晚上的时间插件，发现bootstrap-datetimepicker、bootstrap-datepicker、bootstrap-timepicker、datetimepicker都不一样，一定要看清引入的是哪个（引入的bootstrap-datetimepicker，但是查配置看了很多datetimepicker），贼浪费时间，真气。
css: bootstrap.min.css 、 bootstrap-datetimepicker.min.css
js: jquery.min.js 、bootstrap.min.js 、 bootstrap-datetimepicker.js 、bootstrap-datetimepicker.zh-CN.js
demo：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="css/bootstrap.min.css" /> <link rel="stylesheet" href="css/bootstrap-datetimepicker.min.css" /> </head> <body> <label>日期(年月日)：</label> <input type="text" id="date" > <label>时间（时分）：</label> <input type="text" id="time" > <label>日期+时间（年月日时分）：</label> <input type="text" id="date_time" > <script src="js/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> <script src="js/bootstrap-datetimepicker.js"></script> <script src="js/bootstrap-datetimepicker.zh-CN.js"></script> <script type="text/javascript"> $('#date').datetimepicker({ format:'yyyy-mm-dd', language:'zh-CN', minView: "month", autoclose: true }); $('#time').datetimepicker({ format:'hh:ii', language:'zh-CN', startView: 1, minView: 0, autoclose: true, }); $('#date_time').datetimepicker({ format:'yyyy-mm-dd hh:ii', language:'zh-CN', weekStart: 0, autoclose: true }); </script> </body> </html>
效果：
配置参数：
| 属性 | 默认值 | 描述 | 备注 |
|---|---|---|---|
| format | mm/dd/yyyy | 日期格式 |
p, P, h, hh, i, ii, s, ss, d, dd, m, mm, M, MM, yy, yyyy 的任意组合。 多种组合搭配，满足不同需求。
|
| weekStart | 0 | 一周从哪一天开始 | 0（星期日）到6（星期六） |
| startDate | 开始时间 | 可以选择的最早日期，将禁用所有较早日期。 | |
| endDate | 结束时间 | 可以选择的最晚日期，所有较迟的日期都将被禁用。 | |
| daysOfWeekDisabled | [] | 每周禁用一天。 | |
| autoclose | false | 当选择一个日期之后是否立即关闭此日期时间选择器。 | |
| startView | 2 | 日期时间选择器打开之后首先显示的视图 | 0 小时 | 1 天 | 2 月 | 3 年 | 4 十年 |
| minView | 0 | 日期时间选择器所能够提供的最精确的时间选择视图。 | 0 小时 | 1 天 | 2 月 | 3 年 | 4 十年 |
| maxView | 4 | 日期时间选择器最高能展示的选择范围视图。 | 0 小时 | 1 天 | 2 月 | 3 年 | 4 十年 |
| todayBtn | false | 是否显示当前日期（今天）按钮。 | |
| todayHighlight | false | 是否高亮当前日期。 | |
| keyboardNavigation | true | 是否启用键盘方向键选择改变日期。 | |
| language | en | 语言 | "zh-cn" 中文 | "en" 英文 |
| forceParse | true | 强制解析。 | 当选择器关闭的时候，是否强制解析输入框中的值。也就是说，当用户在输入框中输入了不正确的日期，选择器将会尽量解析输入的值，并将解析后的正确值按照给定的格式format设置到输入框中。 |
| minuteStep | 5 | 分钟选择视图，每5分钟一个间隔选择。 | 只有minView设置 支持分钟，才能看到。 |
| pickerReferer | default | 没有特殊要求，无序设置。 | |
| pickerPosition | bottom-right | 时间选择器窗口的位置。 | "bottom-left" 左下 | "bottom-right" 右下 | "top-left" 左上 | "top-right" 左下 |
| viewSelect | 取 minView 的值 | 视图选择。 | "decade" | "year" | "month" | "day" | "hour" |
| showMeridian | false | 是否为日视图和小时视图启用子午线视图。 | |
| initialDate | new Date() | 初始日期。 | 默认是现在，您可以指定其他日期 |
配置参考：http://www.h-ui.net/lib/Bootstrap.datetimepicker.js.shtml