datetimepicker 插件使用实例及参数说明

借鉴于 https://www.bootcss.com/p/bootstrap-datetimepicker/

 

本文根据个人在项目使用过程中的经验进行一些总结，比较浅显，暂时不做深入分析。

datetimepicker可以将一个元素包装为时间组件，并设置显示样式、事件回调等。以下主要说明一些option设置，并用实例展示一下效果。

先上一个效果图，单个组件的比较简单，例子展示一下用两个组件拼的timerange。大概逻辑是，选择开始时间(startTime)后，结束时间(endTime)只能选择startTime之后的值，startTime变更后，endTime清空并跟着更新：

                                              

图一：选择开始时间                         图二：结束时间>开始时间                   图三：结束时间>开始时间并只能选当天时间

附上代码：

图一图二组合代码：
    initTimeRangeWithSinglePicker("#startTime", "#endTime", 'yyyy-mm-dd hh:ii');

        //初始化容器（input）
	function initTimeRangeWithSinglePicker(startE, endE, formatStr){
		$(startE).datetimepicker({
		    autoclose:1,
		    minView:0,
		    forceParse:0,
		    minuteStep:1,
		    format:formatStr,
		    language: '<%=LocaleUtils.getLocaleStringForJs(request)%>'
		});
		$(endE).datetimepicker({
		    autoclose:1,
		    minView:0,
		    forceParse:0,
		    minuteStep:1,
		    format:formatStr,
		    language: '<%=LocaleUtils.getLocaleStringForJs(request)%>'
		});
	}

        //开始时间元素的onchange事件监听
	function changeStartTime(startE, endE){
		var startTime = $(startE).val();
		if (startTime != '') {
		    var dayTimeArr = startTime.split(' ');
		    var dayTime = dayTimeArr[0];
		    var timeSelected = startTime + ':01';
		    $(endE).val(timeSelected);
		    $(endE).datetimepicker('update');
		    $(endE).datetimepicker('setStartDate', timeSelected);
		    $(endE).datetimepicker('update');
		}else{
		    $(endE).val('');
		    $(endE).datetimepicker('update');
		    $(endE).datetimepicker('setStartDate', new Date(-8639968443048000));
		    $(endE).datetimepicker('update');
		}
	    $(endE).val('');
	}

图一图三组合代码：

        //初始化容器（input）
	function initTime(startE, endE, formatStr){
		$(startE).datetimepicker({
		    autoclose:1,
		    minView:0,
		    forceParse:0,
		    minuteStep:1,
		    format:formatStr,
		    language: '<%=LocaleUtils.getLocaleStringForJs(request)%>'
		});
		$(endE).datetimepicker({
		    autoclose:1,
		    startView:1,
		    minView:0,
		    maxView:1,
		    forceParse:0,
		    minuteStep:1,
		    format:formatStr,
		    language: '<%=LocaleUtils.getLocaleStringForJs(request)%>'
		});
	}

        //开始时间元素的onchange事件监听
	function changeStartTime(startE, endE){
		var startTime = $(startE).val();
		if (startTime != '') {
		    var dayTimeArr = startTime.split(' ');
		    var dayTime = dayTimeArr[0];
		    var timeSelected = startTime + ':01';
		    $(endE).val(timeSelected);
		    $(endE).datetimepicker('update');
		    $(endE).datetimepicker('setStartDate', timeSelected);
		    var dayDate= new Date(Date.parse(dayTime.replace(/-/g,   "/")));
		    $(endE).datetimepicker('setEndDate', timestampToTime(dayDate.getTime() + 24*60*60*1000));
		    $(endE).datetimepicker('update');
		}
	    $(endE).val('');
	}

其实差别只在视图设置和endTime的setStartDate值，以下进行option说明。

 

---

format

String. 默认值: 'mm/dd/yyyy'

日期格式， p, P, h, hh, i, ii, s, ss, d, dd, m, mm, M, MM, yy, yyyy 的任意组合。

---

weekStart

Integer. 默认值：0

一周从哪一天开始。0（星期日）到6（星期六）

startDate

设置组件的开始时间，早于此时间的值不可选中

endDate

设置组件的结束时间，晚于此时间的值不可选中

daysOfWeekDisabled

String, Array. 默认值: '', []

从0（周日）到6（周六）的多值组合不可被使用，如'0,6' ，或者 [0,6]

---

autoclose

Boolean. 默认值：false

当选择一个日期之后是否立即关闭此日期时间选择器。

---

startView

Number, String. 默认值：2, 'month'

日期时间选择器打开之后首先显示的视图。 可接受的值：

• 0 or 'hour' for the hour view
• 1 or 'day' for the day view
• 2 or 'month' for month view (the default)
• 3 or 'year' for the 12-month overview
• 4 or 'decade' for the 10-year overview. Useful for date-of-birth datetimepickers.

minView

Number, String. 默认值：0, 'hour'

日期时间选择器所能够提供的最精确的时间选择视图。

maxView

Number, String. 默认值：4, 'decade'

日期时间选择器最高能展示的选择范围视图。

---

todayBtn

Boolean, "linked". 默认值: false

如果此值为true 或 "linked"，则在日期时间选择器组件的底部显示一个 "Today" 按钮用以选择当前日期。如果是true的话，"Today" 按钮仅仅将视图转到当天的日期，如果是"linked"，当天日期将会被选中。

todayHighlight

Boolean. 默认值: false

如果为true, 高亮当前日期。

---

language

String. 默认值: 'en'

可以借鉴datetimepicker的locales配置，同时意味着，不需要的language可以从代码中删除。

---

forceParse

Boolean. 默认值: true

当选择器关闭的时候，是否强制解析输入框中的值。也就是说，当用户在输入框中输入了不正确的日期，选择器将会尽量解析输入的值，并将解析后的正确值按照给定的格式format设置到输入框中。

minuteStep

Number. 默认值: 5

此数值被当做步进值用于构建小时视图。对于每个 minuteStep 都会生成一组预设时间（分钟）用于选择。

initialDate

Date or String. 默认值: new Date()

---

插件使用方法：

.datetimepicker(options);

移除组件。同时移除已经绑定的event、内部绑定的对象和HTML元素：

.datetimepicker('remove');

更新组件值：

.datetimepicker('update');

设置开始/截至时间：

.datetimepicker('setStartDate', value);
.datetimepicker('setEndDate', value);

changeDate事件：

.datetimepicker()
.on('changeDate', function(ev){
    if (ev.date.valueOf() < date-start-display.valueOf()){
        ....
    }
});

暂时先总结到这里，之后总结一篇daterangepicker的使用。