官方文檔：https://getdatepicker.com/4/
moment.js地址：https://github.com/moment/moment/tree/master

需要用到的js和css（按順序引用）：

bootstrap.min.css
bootstrap-datetimepicker.css

jquery.js
moment-with-locales.js (moment.js地址中可以獲取)
zh-cn.js （屬于moment-with-locales.js的一部分）
bootstrap.min.js
bootstrap-datetimepicker.min.js

選項

所有選項都可以通過data屬性獲取或設置值
例如：$(’#datetimepicker’).data(“DateTimePicker”).date(‘2020-05-06 23:56:25’)

選項類型默認值描述

date	string, Date, moment, null		設置控件時間
format	string | false	false	格式化時間字符串。 如果為false，將被設置為本地時間。
dayViewHeaderFormat	string	‘MMMM YYYY’	用于自定義 "day" 視圖的頁眉。
extraFormats	arr	false	允許多種有效的輸入格式。接受有效輸入時刻格式選項的數(shù)組。
stepping	number	1	設置分鐘值時的步進值
minDate	string,Date, moment, false	false	設置最小時間并禁止選擇此時刻之前的值。 如果值為false 則清除minDate參數(shù)，并且不再限制時間選擇 (如果當前已經(jīng)選擇的時間小于minDate，則在設置minDate之后，當前的所選時間將變?yōu)閙inDate所設置的參數(shù))
maxDate	string,Date, moment, false	false	設置最大的時間并禁止選擇此時刻之后的值。 如果設置值為false 則清除maxDate 參數(shù)，并且不再限制時間選擇 (如果當前已經(jīng)選擇的時間大于maxDate ，則在設置maxDate 之后，當前的所選時間將變?yōu)閙axDate所設置的參數(shù))
useCurrent	boolean,string	true	如果值為true，則自動填入本地當前日期。 如果值為false,則不會自動填寫日期。 則會如果為string，可以通過在變量中傳遞以下字符串之一('year'，'month'， 'day'， 'hour'，'minute')來選擇初始化時刻的粒度。 (如果設置了默認日期時間，useCurrent將不會生效)
collapse	boolean	true	使用bootstrap collapse 在日期/時間選擇器之間切換。
locale	string	moment.locale()	接受任何有效時刻區(qū)域設置的字符串，例如de表示德語。 需要引入moment-with-locales.js 或者一個本地化js文件（中文zh-cn.js）
defaultDate	string, Date, moment,false	false	設置選擇器默認日期/時間。會覆蓋useCurrent。 如果為false則清除默認值
disabledDates	false,(date, moment, string)的數(shù)組	false	禁止用戶選擇日期數(shù)組中的值。 該選項優(yōu)先級大于options.minDate, options.maxDate。 如果設置了options.enabledDates則會刪除其配置項。 設置的粒度為day。
enabledDates	false,(date, moment, string)的數(shù)組	false	只允許用戶選擇日期數(shù)組中的值。 該選項優(yōu)先級大于options.minDate, options.maxDate。 如果設置了options.disabledDates則會刪除其配置項。 設置的粒度為day。
icons			更改控件的默認圖標。
useStrict	boolean	false	是否對日期格式使用嚴格模式
sideBySide	boolean	false	同時使用時間和日期時選擇器時，兩者并排顯示。
daysOfWeekDisabled	0-6組成的數(shù)組	[ ]	禁用一周中的某個時間 比options.minDate, options.maxDate, options.disabledDates 和 options.enabledDates的優(yōu)先級低
calendarWeeks	boolean	false	在日期選擇框中的左邊顯示該周是第幾周
viewMode	‘days’, ‘months’, ‘years’ ,‘decades’	‘days’	日期選擇框默認顯示的時間視圖。
toolbarPlacement	‘default’, ‘top’, ‘bottom’	‘default’	更改圖標工具欄的位置。
showTodayButton	boolean	false	在圖標工具欄中顯示‘Today’圖標按鈕，點擊后返回到今天。（option.sideBySide設置為true,則不會顯示）
showClear	boolean	false	在圖標工具欄中顯示‘Clear’圖標按鈕，點擊后日歷設置為空。（option.sideBySide設置為true,則不會顯示）
showClose		false	在圖標工具欄中顯示“Close”圖標按鈕。點擊"Close"按鈕會調用hide()方法。option.sideBySide設置為true,則不會顯示）
widgetPositioning	垂直位置：‘a(chǎn)uto’， ‘top’， 'bottom’ 水平位置：‘a(chǎn)uto’， ‘left’， ‘right’	{ horizontal: ‘a(chǎn)uto’，vertical: ‘a(chǎn)uto’}	日期選擇框所顯示的位置。
widgetParent	string,$(element)	null	設置具有position:'relative'css的父元素。(string表示一個選擇器)
keepOpen	boolean	false	默認打開日期選擇框
inline	boolean	false	內聯(lián)顯示選擇器。這也將隱藏邊界和陰影。
keepInvalid	boolean	false	保留無效的日期
keyBinds	object		允許自定義事件在鍵盤按下觸發(fā)。
debug	boolean	false	將導致日期選擇器在blur事件發(fā)生后保持打開狀態(tài)。
ignoreReadonly	boolean	false	即使關聯(lián)的輸入元素具有該readonly="readonly"屬性，也允許觸發(fā)日期選擇器顯示事件。
disabledTimeIntervals	array	false	設置禁用小時(moments)的值
allowInputToggle	boolean	false	如果true，使用按鈕組時，當焦點在input框上時，日期選擇框將在按鈕上顯示
focusOnShow	boolean	true	如果為false，當日期選擇框顯示時，input框將不會得到焦點。
disabledHours	array	false	禁用每天的某些小時。 小時必須是24小時制的(0-24)。
enabledHours	array	false	只啟用每天的某些小時。 小時必須是24小時制的(0-24)。
viewDate	false		這將更改viewDate而不更改或設置所選日期。
parseInputDate	function		自定義輸入格式，例如:用戶可以輸入'yesterday' or'30 days ago'
tooltips			改變每個圖標上的工具提示為一個自定義字符串。
timeZone	string	‘’	設置時區(qū)。您必須包括moment-timezone.js和moment-timzone數(shù)據(jù)。

//將控件時間設為'2020-06-21 23:06:08' //方法一: $('#datetimepicker1').datetimepicker({date: '2020-06-21 23:06:08' });//方法二： $('#datetimepicker1').data("DateTimePicker").date('2020-06-21 23:06:08'); //24小時時間 $('#datetimepicker1').datetimepicker({format: 'YYYY-MM-DD HH:mm:ss', });//12小時時間 $('#datetimepicker1').datetimepicker({format: 'YYYY-MM-DD hh:mm:ss', }); //禁用0時-8時，18時-24時 disabledTimeIntervals: [[moment({ h: 0 }), moment({ h: 8 })], [moment({ h: 18 }), moment({ h: 24 })]] //自定義日期格式 var parseRelativeDate = function(relativeDate) {switch (relativeDate) {case 'today':return moment()case 'yesterday':return moment().subtract(1, 'day');default:return moment().subtract(Number(relativeDate.replace("days ago", "").trim()), 'days');} }var parseInputDate = function(inputDate) {var relativeDatePattern = /today|yesterday|[0-9]+\s+(days ago)/,resultDate;if (moment.isMoment(inputDate) || inputDate instanceof Date) {resultDate = moment(inputDate);} else {var relativeDate = inputDate.match(relativeDatePattern),parseDate = null;if (relativeDate !== null)parseDate = this.parseRelativeDate(inputDate.match(relativeDatePattern)[0]);elseparseDate = moment();resultDate = moment(parseDate, "YYYY-MM-DD");}return resultDate; }

方法

方法的使用：$('#datetimepicker').data("DateTimePicker").FUNCTION()
例如：$('#datetimepicker').data("DateTimePicker").destroy();

1. 銷毀控件.destroy()

銷毀控件并刪除所有附加的事件監(jiān)聽器

2. 顯示或隱藏控件.toggle()

3. 顯示控件.show()

4. 隱藏控件.hide()

5. 禁用控件.disable()

調用該方法可以為 input 元素 添加disabled="true"屬性，從而禁止用戶更改時間。

6. 啟用控件.enable()

調用該方法刪除 input 元素上的disabled屬性

7. 清空.clear()

調用該方法將設置的日期清空

事件

事件類型描述事件對象屬性

dp.hide	當控件隱藏時觸發(fā)。	event.date返回當前input框中所選的時間
dp.show	當控件顯示時觸發(fā)。
dp.change	當日期更改時觸發(fā)，包括當更改為非日期時(例如當keepInvalid=true時)。	event.date 日期更改之后的值。 event.oldDate 日期更改之前的值
dp.error	當所選日期未能通過驗證時觸發(fā)。	event.date 無效的日期。 event.oldDate 日期更改前的值。
dp.update	當viewDate更改時觸發(fā)(在大多數(shù)情況下)。 例如“下一步”和“上一步”按鈕，選擇一年。	event.change 更改時間類型，例如yyyy 到 year 的變化 。 event.oldDate 日期更改前的值。event.viewDate 新的時間窗口

//控件隱藏時觸發(fā) $('#datetimepicker').on('dp.hide', function(e){console.log(e.date);//返回當前選中的時間 });

用例

1.控制最大日期與最小日期

var dateRange = function ($s, $e) {if (!$s.data("DateTimePicker") || !$e.data("DateTimePicker")) {return;}$s.on("dp.change", function (e) {if (e.date == null) {$e.data("DateTimePicker").minDate(false);} else {$e.data("DateTimePicker").keepInvalid(true);$e.data("DateTimePicker").minDate(e.date);}});$e.on("dp.change", function (e) {$e.data("DateTimePicker").keepInvalid(false);if (e.date == null) {$s.data("DateTimePicker").maxDate(false);} else {$s.data("DateTimePicker").maxDate(e.date);}});var sDate = $s.data("DateTimePicker").date();if (sDate) {$e.data("DateTimePicker").minDate(sDate);}var eDate = $e.data("DateTimePicker").date();if (eDate) {$s.data("DateTimePicker").maxDate(eDate);} }$('#dateStart').datetimepicker(); $('#dateEnd').datetimepicker();dateRange( $('#dateStart'), $('#dateEnd'));

2. 顯示日期選擇框會觸發(fā)dp.change事件

$('#dateEnd-single' + (selfNum - 1)).on('dp.change', function (e) {//第一次input框從null到有日期：e.oldDate 為 null//input框中有日期，第一次點擊input框時：e.oldDate._i 為null//input框中有日期，第二次（包括以后多次）點擊input框時，e.oldDate._i 為時間//第二次（包括以后多次） e.oldDate._i 可能也為空，暫時還不知道觸發(fā)條件if(e.oldDate && !e.oldDate._i){ return false;}//操作.... });

總結

以上是生活随笔為你收集整理的bootstrap-datepicker属性和方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。