今天折騰了一下午和一晚上的時間插件，發現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