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]);
        else
          parseDate = 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;
	 }
	 
	//操作....
});