bootstrap-datetimepicker時間外掛及配置引數
阿新 • • 發佈：2020-10-21
今天折騰了一下午和一晚上的時間外掛，發現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