admin 管理员组

文章数量: 1184232

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的使用。

本文标签： datetimepicker 插件使用实例及参数说明

版权声明：本文标题：datetimepicker 插件使用实例及参数说明 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://www.roclinux.cn/b/1693759838a241198.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。