初次使用，依賴庫以及日期選擇器等下載地址，請在筆者另文查找：bootstrap日期選擇器本地化-中文
這篇說明 bootstrap3 Datepicker 官網(wǎng)的Options--屬性
一段簡單的bootstrap3日期選擇器代碼
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap3 datetime picker Template</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-datetimepicker.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/moment-with-locales.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-datetimepicker.min.js"></script>
<script>
$('#datetimepicker1').datetimepicker({
//...
});
</script>
</body>
</html>
屬性使用十分簡單，只需要在上面代碼的
$('#datetimepicker1').datetimepicker({
//...
});
部分設(shè)置相關(guān)屬性即可。如：
$('#datetimepicker1').datetimepicker({
format : 'dddd YYYY年MM月DD日 HH:mm:ss'
});
屬性列表
1 - format
接收的參數(shù)類型：
Default: 'MMMM YYYY'
Accepts: many types
format 可接受參數(shù)參考 moment.js - Display - Format
① - false [default]
② - 'YYYY年MM月DD日 hh:mm:ss'
③ - 其他日期格式可參考moment網(wǎng)站：moment format
2 - dayViewHeaderFormat
接收的參數(shù)類型：
Default: 'MMMM YYYY'
Accepts: many types
dayViewHeaderFormat 可接受參數(shù)參考 moment.js - Display - Format
① - 'MMMM YYYY'
② - 'dddd MMMM YYYY'
③ - 其他日期格式可參考moment網(wǎng)站： moment.js - Display - Format
3 - extraFormats
接收的參數(shù)類型：
Default: false
Accepts: many types
① - false [default]
4 - stepping 整型
接收的參數(shù)類型：
Default: 1
Accepts: 1 - n (n can be a large number if you want)
① - 1 [default]
② - 10
③ - 其他自行發(fā)揮想象
5 - minDate
接收的參數(shù)類型：
Default: false
Accepts: date, moment, string
說明：不允許設(shè)置minDate以前的時間，注意：該方法會重寫defaultDate和useCurrent
① - false [default]
略
② - moment()
取現(xiàn)在的時間為minDate，在此之前的時間變灰且不可選。
6 - maxDate
接收的參數(shù)類型：
Default: false
Accepts: date, moment, string
說明：不允許設(shè)置maxDate以后的時間，注意：該方法會重寫defaultDate和useCurrent
① - false [default]
略
② - moment()
取現(xiàn)在的時間為maxDate，在此之后的時間變灰且不可選。
7 - useCurrent
接收的參數(shù)類型：
Default: true
Accepts: true/false
① - true [default]
點擊彈出選擇器后，文本框獲取并顯示當(dāng)前時間。注意：實際上顯示的是打開瀏覽器時的時間，不是當(dāng)前時間。
② - false
點擊彈出選擇器后，文本框不顯示當(dāng)前時間
8 - collapse
接收的參數(shù)類型：
Default: true
Accepts: true/false
① - true [default]
② - false
9 - locale
接收的參數(shù)類型：
Default: moment.locale()
Accepts: string, moment.local('locale')
說明：本地化
① - moment.locale() [default]
默認(rèn)是美國英語，注意：locale針對的是日期選擇器，而非文本框，文本框通過上文的format設(shè)置
② - moment().locale('zh-cn')
簡體中文
③ - moment().locale('fr')
法文
④ - 其他國家地區(qū)可以在moment.js下載包中的locale文件中找到對應(yīng)的本地化文件，下載地址請移步本文開頭的鏈接。
10 - defaultDate
接收的參數(shù)類型：
Default: false
Accepts: date, moment, string
① - false [default]
11 - disabledDates
接收的參數(shù)類型：
Default: false
Accepts: array of [date, moment, string]
① - false [default]
略
12 - enabledDates
接收的參數(shù)類型：
Default: false
Accepts: array of [date, moment, string]
① - false [default]
略
13 - icons
接收的參數(shù)類型：
Default: {
time: 'glyphicon glyphicon-time',
date: 'glyphicon glyphicon-calendar',
up: 'glyphicon glyphicon-chevron-up',
down: 'glyphicon glyphicon-chevron-down',
previous: 'glyphicon glyphicon-chevron-left',
next: 'glyphicon glyphicon-chevron-right',
today: 'glyphicon glyphicon-screenshot',
clear: 'glyphicon glyphicon-trash',
close: 'glyphicon glyphicon-remove'
}
Accepts: object with all or some of the parameters above
說明：圖標(biāo)更改
14 - useStrict
接收的參數(shù)類型：
Default: false
Accepts: true/false
① - false [default]
15 - sideBySide
接收的參數(shù)類型：
Default: false
Accepts: true/false
將時間選擇移動到右邊，與日期選擇并排
① - false [default]
略
② - true
16 - daysOfWeekDisabled
接收的參數(shù)類型：
Default: []
Accepts: array of numbers from 0-6
說明：0為周日，1-6為周一-周六
① - [] [default]
略
② - [0, 6]
禁用周六日
③ - 其他自行發(fā)揮想象
17 - calendarWeeks
接收的參數(shù)類型：
Default: false
Accepts: true/false
說明：是否顯示當(dāng)前周是今年的第幾周，默認(rèn)不顯示
① - false [default]
略
② - true
18 - viewMode
接收的參數(shù)類型：
Default: 'days'
Accepts: 'decades','years','months','days'
說明：在初次打開日期選擇器時的顯示模式
① - 'days' [default]
略
② - 'decades'
③ - 'years'
④ - 'months'
19 - toolbarPlacement
接收的參數(shù)類型：
Default: 'default'
Accepts: 'default', 'top', 'bottom'
說明：defualt和bottom其實是一樣的
① - 'default' [default]
② - 'top'
20 - showTodayButton
接收的參數(shù)類型：
Default: false
Accepts: true/false
說明：顯示"今日按鈕"，點擊后自動調(diào)整為當(dāng)前時間，精確到秒，并同步UI。默認(rèn)不顯示
① - false [default]
② - true
21 - showClear
接收的參數(shù)類型：
Default: false
Accepts: true/false
說明：顯示"清除按鈕"，點擊后取消當(dāng)前選取的日期并清空文本框。默認(rèn)不顯示
① - false [default]
略
② - true
22 - showClose
接收的參數(shù)類型：
Default: false
Accepts: true/false
說明：顯示"關(guān)閉按鈕"，點擊后關(guān)閉日期選擇器。默認(rèn)不顯示。通常不需要，只要點選日期選擇器外的區(qū)域就可實現(xiàn)關(guān)閉。
① - false [default]
略
② - true
23 - widgetPositioning
接收的參數(shù)類型：
Default: {
horizontal: 'auto'
vertical: 'auto'
}
Accepts: object with the all or one of the parameters above
horizontal: 'auto', 'left', 'right'
vertical: 'auto', 'top', 'bottom'
說明：指定日期選擇器彈出的方向，默認(rèn)在垂直方向和水平方向都采用自適應(yīng)(auto)。
① - {horizontal : 'auto' vertical: 'auto'} [default]
略
② - {}
24 - widgetParent
接收的參數(shù)類型：
Default: null
Accepts: string or jQuery object
25 - keepOpen
接收的參數(shù)類型：
Default: false
Accepts: true/false
① - false [default]
略
② - true
26 - inline
接收的參數(shù)類型：
Default: false
Accepts: true/false
說明：不使用文本框的日期選擇器
官網(wǎng)代碼例子
<div style="overflow:hidden;">
<div class="form-group">
<div class="row">
<div class="col-md-8">
<div id="datetimepicker12"></div>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker12').datetimepicker({
inline: true,
sideBySide: true
});
});
</script>
</div>
27 - keepInvalid
接收的參數(shù)類型：
Default: false
Accepts: true/false
說明：是否允許文本框鍵入的日期格式無效，不允許時文本框會自動修改成正確的格式。默認(rèn)不允許。
28 - keyBinds
接收的參數(shù)類型：
Default: up: function (widget) {
if (widget.find('.datepicker').is(':visible')) {
this.date(this.date().clone().subtract(7, 'd'));
} else {
this.date(this.date().clone().add(1, 'm'));
}
},
down: function (widget) {
if (!widget) {
this.show();
}
else if (widget.find('.datepicker').is(':visible')) {
this.date(this.date().clone().add(7, 'd'));
} else {
this.date(this.date().clone().subtract(1, 'm'));
}
},
'control up': function (widget) {
if (widget.find('.datepicker').is(':visible')) {
this.date(this.date().clone().subtract(1, 'y'));
} else {
this.date(this.date().clone().add(1, 'h'));
}
},
'control down': function (widget) {
if (widget.find('.datepicker').is(':visible')) {
this.date(this.date().clone().add(1, 'y'));
} else {
this.date(this.date().clone().subtract(1, 'h'));
}
},
left: function (widget) {
if (widget.find('.datepicker').is(':visible')) {
this.date(this.date().clone().subtract(1, 'd'));
}
},
right: function (widget) {
if (widget.find('.datepicker').is(':visible')) {
this.date(this.date().clone().add(1, 'd'));
}
},
pageUp: function (widget) {
if (widget.find('.datepicker').is(':visible')) {
this.date(this.date().clone().subtract(1, 'M'));
}
},
pageDown: function (widget) {
if (widget.find('.datepicker').is(':visible')) {
this.date(this.date().clone().add(1, 'M'));
}
},
enter: function () {
this.hide();
},
escape: function () {
this.hide();
},
'control space': function (widget) {
if (widget.find('.timepicker').is(':visible')) {
widget.find('.btn[data-action="togglePeriod"]').click();
}
},
t: function () {
this.date(moment());
},
'delete': function () {
this.clear();
}
說明：自定義綁定鍵盤事件
29 - debug
接收的參數(shù)類型：
Default: false
Accepts: true/false
說明：開啟debug模式后，打開日期選擇器后，點擊選擇器外的區(qū)域不會關(guān)閉選擇器。默認(rèn)不開啟
30 - ignoreReadonly
接收的參數(shù)類型：
Default: false
Accepts: true/false
31 - disabledTimeIntervals
接收的參數(shù)類型：
Default: false
Accepts:
32 - allowInputToggle
接收的參數(shù)類型：
Default: false
Accepts: true/false
說明：是否允許點擊文本框彈出日期選擇器。默認(rèn)不允許。
33 - focusOnShow
接收的參數(shù)類型：
Default: true
Accepts: true/false
說明：點擊打開日期選擇器后，自動focus文本框。如果沒有focus文本框，那么點擊日期選擇器外的區(qū)域，不會關(guān)閉選擇器。默認(rèn)focus。
34 - enabledHours
接收的參數(shù)類型：
Default: false
Accepts: array of numbers from 0-23 (0-11 if using am/pm)
說明：給出可用小時的數(shù)組。默認(rèn)false——所有小時都可用。注意：為了該邏輯，還需要做以下這些工作：
1 - 設(shè)置useCurrent屬性為false
2 - "今日按鈕"不可見，或可見但添加邏輯判斷當(dāng)前時間是否在enabledHours給出的值范圍內(nèi)。
3 - 在日期選擇器點選一個日期時，也會選取一個時分秒【見下圖】（如果useCurrent設(shè)置為false，該時間經(jīng)過測試是打開瀏覽器的時間，具體是渲染完成前還是完成后暫不得而知；如果useCurrent設(shè)置為true，要清空文本框內(nèi)的時間，并重新打開日期選擇器才會重新獲取當(dāng)前時間。），所以也要對其添加邏輯判斷這個時間是否在enabledHours給出的值范圍內(nèi)。
4 - 想到或遇到時繼續(xù)完善，歡迎各位補充
① - false [default]
略
② - [0, 1]
0時和1時可用
35 - disabledHours
接收的參數(shù)類型：
Default: false
Accepts: array of numbers from 0-23 (0-11 if using am/pm)
說明：參考enabledHours，不贅述。
36 - viewDate
接收的參數(shù)類型：
Default: false
Accepts: date, moment, string
37 - tooltips
接收的參數(shù)類型：
tooltips: {
today: 'Go to today',
clear: 'Clear selection',
close: 'Close the picker',
selectMonth: 'Select Month',
prevMonth: 'Previous Month',
nextMonth: 'Next Month',
selectYear: 'Select Year',
prevYear: 'Previous Year',
nextYear: 'Next Year',
selectDecade: 'Select Decade',
prevDecade: 'Previous Decade',
nextDecade: 'Next Decade',
prevCentury: 'Previous Century',
nextCentury: 'Next Century',
incrementHour: 'Increment Hour',
pickHour: 'Pick Hour',
decrementHour:'Decrement Hour',
incrementMinute: 'Increment Minute',
pickMinute: 'Pick Minute',
decrementMinute:'Decrement Minute',
incrementSecond: 'Increment Second',
pickSecond: 'Pick Second',
decrementSecond:'Decrement Second',
}
說明：tooltips是當(dāng)鼠標(biāo)懸停在控件上，彈出一些提示性文字的工具。如下圖，當(dāng)懸停在"今日按鈕"約一秒，彈出"Go to today"提示文字。對應(yīng)上面的'today'鍵，修改鍵便可自定義懸停提示文字
tooltips : {today : '當(dāng)前時間'}
