官方文檔：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

選項(xiàng)

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

選項(xiàng)類型默認(rèn)值描述

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

//將控件時(shí)間設(shè)為'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小時(shí)時(shí)間 $('#datetimepicker1').datetimepicker({format: 'YYYY-MM-DD HH:mm:ss', });//12小時(shí)時(shí)間 $('#datetimepicker1').datetimepicker({format: 'YYYY-MM-DD hh:mm:ss', }); //禁用0時(shí)-8時(shí)，18時(shí)-24時(shí) 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()

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

6. 啟用控件.enable()

調(diào)用該方法刪除 input 元素上的disabled屬性

7. 清空.clear()

調(diào)用該方法將設(shè)置的日期清空

事件

事件類型描述事件對(duì)象屬性

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

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

用例

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. 顯示日期選擇框會(huì)觸發(fā)dp.change事件

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

總結(jié)

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

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