bootstrap-datepicker属性和方法

官方文档：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	允许多种有效的输入格式。接受有效输入时刻格式选项的数组。
stepping	number	1	设置分钟值时的步进值
minDate	string,Date, moment, false	false	设置最小时间并禁止选择此时刻之前的值。如果值为`false` 则清除minDate参数，并且不再限制时间选择 (如果当前已经选择的时间小于minDate，则在设置minDate之后，当前的所选时间将变为minDate所设置的参数)
maxDate	string,Date, moment, false	false	设置最大的时间并禁止选择此时刻之后的值。如果设置值为`false` 则清除maxDate 参数，并且不再限制时间选择 (如果当前已经选择的时间大于maxDate ，则在设置maxDate 之后，当前的所选时间将变为maxDate所设置的参数)
useCurrent	boolean,string	true	如果值为`true`，则自动填入本地当前日期。如果值为`false`,则不会自动填写日期。则会如果为`string`，可以通过在变量中传递以下字符串之一(`'year'`，`'month'`， `'day'`， `'hour'`，`'minute'`)来选择初始化时刻的粒度。 (如果设置了默认日期时间，useCurrent将不会生效)
collapse	boolean	true	使用bootstrap collapse 在日期/时间选择器之间切换。
locale	string	moment.locale()	接受任何有效时刻区域设置的字符串，例如de表示德语。需要引入`moment-with-locales.js` 或者一个本地化js文件（中文zh-cn.js）
defaultDate	string, Date, moment,false	false	设置选择器默认日期/时间。会覆盖useCurrent。如果为`false`则清除默认值
disabledDates	false,(date, moment, string)的数组	false	禁止用户选择日期数组中的值。该选项优先级大于`options.minDate`, `options.maxDate`。如果设置了`options.enabledDates`则会删除其配置项。设置的粒度为`day`。
enabledDates	false,(date, moment, string)的数组	false	只允许用户选择日期数组中的值。该选项优先级大于`options.minDate`, `options.maxDate`。如果设置了`options.disabledDates`则会删除其配置项。设置的粒度为`day`。
icons			更改控件的默认图标。
useStrict	boolean	false	是否对日期格式使用严格模式
sideBySide	boolean	false	同时使用时间和日期时选择器时，两者并排显示。
daysOfWeekDisabled	0-6组成的数组	[ ]	禁用一周中的某个时间比`options.minDate`, `options.maxDate`, `options.disabledDates` 和 `options.enabledDates`的优先级低
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	垂直位置：‘auto’， ‘top’， 'bottom’ 水平位置：‘auto’， ‘left’， ‘right’	{ horizontal: ‘auto’，vertical: ‘auto’}	日期选择框所显示的位置。
widgetParent	string,$(element)	null	设置具有`position:'relative'`css的父元素。(string表示一个选择器)
keepOpen	boolean	false	默认打开日期选择框
inline	boolean	false	内联显示选择器。这也将隐藏边界和阴影。
keepInvalid	boolean	false	保留无效的日期
keyBinds	object		允许自定义事件在键盘按下触发。
debug	boolean	false	将导致日期选择器在`blur`事件发生后保持打开状态。
ignoreReadonly	boolean	false	即使关联的输入元素具有该`readonly="readonly"`属性，也允许触发日期选择器显示事件。
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	‘’	设置时区。您必须包括moment-timezone.js和moment-timzone数据。

//将控件时间设为'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()

销毁控件并删除所有附加的事件监听器

2. 显示或隐藏控件.toggle()

3. 显示控件.show()

4. 隐藏控件.hide()

5. 禁用控件.disable()

调用该方法可以为 input 元素添加disabled="true"属性，从而禁止用户更改时间。

6. 启用控件.enable()

调用该方法删除 input 元素上的disabled属性

7. 清空.clear()

调用该方法将设置的日期清空

事件

事件类型	描述	事件对象属性
dp.hide	当控件隐藏时触发。	event.date返回当前input框中所选的时间
dp.show	当控件显示时触发。
dp.change	当日期更改时触发，包括当更改为非日期时(例如当keepInvalid=true时)。	event.date 日期更改之后的值。 event.oldDate 日期更改之前的值
dp.error	当所选日期未能通过验证时触发。	event.date 无效的日期。 event.oldDate 日期更改前的值。
dp.update	当viewDate更改时触发(在大多数情况下)。例如“下一步”和“上一步”按钮，选择一年。	event.change 更改时间类型，例如yyyy 到 year 的变化。 event.oldDate 日期更改前的值。event.viewDate 新的时间窗口

//控件隐藏时触发
$('#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. 显示日期选择框会触发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 可能也为空，暂时还不知道触发条件if(e.oldDate && !e.oldDate._i){ return false;}//操作....
});

bootstrap-datepicker属性和方法相关推荐

sklearn 随机森林(分类器、回归器)的重要参数、属性、方法理解
文章目录随机森林分类器引入重要参数 1,n_estimators 2,criterion 3,max_depth 4,min_samples_leaf 5,min_samples_split 7 ...
jQuery在IE8上使用时提示“对象不支持此属性或方法”
如果在引入jquery的时候,看到ie8的控制台报错:"某某对象不支持此属性或方法",一般是因为jquery的版本问题,要引入1.9.1以下的版本,如果同时使用了bootstrap ...
adodb.RecordSet的属性和方法
为了更精确地跟踪数据,要用RecordSet组件创建包括数据的游标,游标就是储存在内存中的数据: rs = Server.CreateObject("ADODB.RecordSet" ...
php 静态类内存,php面向对象中static静态属性与方法的内存位置分析
本文实例分析了php面向对象中static静态属性与方法的内存位置.分享给大家供大家参考.具体如下: static静态属性的内存位置-->类,而不是对象.下面做测试来证明一下 header(&q ...
面向对象（类的概念，属性，方法，属性的声明，面向对象编程思维
1 面向对象 1.1 你是如何认识新事物的? 从过往的事物中总结事物的特点(特征),并比对新事物,把新事物进行归类. 1.2 类(Class)的概念(A) 类是对一组具有相同特征和行为的对象的抽象描述 ...
Python内部类，内部类调用外部类属性，方法
一 Python中内部类典型定义: class MyOuter:age=18def __init__(self,name):self.name=nameclass MyInner:def __ini ...
《C#精彩实例教程》小组阅读10 -- C#属性与方法
本微信图文详细介绍了C#的属性与方法.
selenium提取数据之driver对象的常用属性和方法
selenium提取数据之driver对象的常用属性和方法在使用selenium过程中,实例化driver对象后,driver对象有一些常用的属性和方法 driver.page_source 当前标 ...
尚硅谷学习笔记-节点的常用属性和方法
节点的常用属性和方法[图片在末尾] 方法: 通过具体的元素节点调用 getElementsByTagName() 方法,获取当前节点的指定标签名孩子节点 appendChild( oChildNode ...
Node.js process 模块常用属性和方法
Node.js是常用的Javascript运行环境,本文和大家发分享的主要是Node.js中process 模块的常用属性和方法,希望通过本文的分享,对大家学习Node.js http://www.m ...