DateRangePicker 中文化以及老版本的一些初始化问题,不能选择秒的问题
2016-10-09 14:53
369 查看
$('#headlineAddForm #rangeTime').daterangepicker({ showDropdowns : true, timePicker : true, //是否显示小时和分钟 timePicker24Hour: true, timePickerIncrement : 1, //时间的增量,单位为分钟 timePickerSeconds : true, linkedCalendars : false, locale : { format: "YYYY-MM-DD HH:mm:ss", //控件中from和to 显示的日期格式 separator : " - ", applyLabel : "确定", cancelLabel : "取消", fromLabel : "开始", toLabel: "结束", customRangeLabel : "自定义", weekLabel : "W", daysOfWeek : ["日", "一", "二", "三", "四", "五", "六"], monthNames : ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月 "], firstDay : 1 } }, function(start, end, label) { $("#headlineAddForm #startTime").val(start.unix()); $("#headlineAddForm #endTime").val(end.unix()); }).on('hide.daterangepicker', function() { $('#headlineAddForm').data('bootstrapValidator').updateStatus('rangeTime', 'NOT_VALIDATED',null).validateField('rangeTime'); }).on('cancel.daterangepicker', function() { $('#headlineAddForm #rangeTime').val(""); $('#headlineAddForm').data('bootstrapValidator').updateStatus('rangeTime', 'NOT_VALIDATED',null).validateField('rangeTime'); }).on('apply.daterangepicker', function() { if($.trim($("#headlineAddForm #startTime").val()).length == 0) { $('#headlineAddForm #rangeTime').val(""); $('#headlineAddForm').data('bootstrapValidator').updateStatus('rangeTime', 'NOT_VALIDATED',null).validateField('rangeTime'); } });
$('#headlineModifyForm #rangeTime').daterangepicker({ showDropdowns : true, timePicker : true, //是否显示小时和分钟 timePicker24Hour: true, timePickerIncrement : 1, //时间的增量,单位为分钟 timePickerSeconds : true, linkedCalendars : false, locale : { format: "YYYY-MM-DD HH:mm:ss", //控件中from和to 显示的日期格式 separator : " - ", applyLabel : "确定", cancelLabel : "取消", fromLabel : "开始", toLabel: "结束", customRangeLabel : "自定义", weekLabel : "W", daysOfWeek : ["日", "一", "二", "三", "四", "五", "六"], monthNames : ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月 "], firstDay : 1 } }, function(start, end, label) { $("#headlineModifyForm #startTime").val(start.unix()); $("#headlineModifyForm #endTime").val(end.unix()); }).on('hide.daterangepicker', function() { $('#headlineModifyForm').data('bootstrapValidator').updateStatus('rangeTime', 'NOT_VALIDATED',null).validateField('rangeTime'); });
dataRangePicker使用最新版本国际化,不过在做更新操作的时候貌似不能把初始化放在编辑回显数据的时候,这里不知道为啥,在使用老版本的daterangepicker的时候可以把初始化放在回显数据的时候,使用新版本的时候会报bootstrapValidator的错误(这里我在回显的时候使用了如下代码
$('#headlineModifyDiv').on('show.bs.modal', function() { $('#headlineModifyForm').bootstrapValidator('resetForm', false); });然后这里就总是报bootstrapValidator的错误
)所以更新的时候把daterangepicker的初始化放出来了,也就是没在回显数据的时候初始化datarangepicker组件。
在编辑的时候需要把日期值重新赋予日期控件这里可以这样写
$("#headlineModifyForm #rangeTime").data('daterangepicker').setStartDate(getLocalTime(row.startTime)); $("#headlineModifyForm #rangeTime").data('daterangepicker').setEndDate(getLocalTime(row.endTime));这样就能使用最新版本的选择秒的功能了,老版本的貌似不能选择秒。
另外很多项目在日期转化的时候都自己写一些函数,其实在使用daterangepicker的时候作者使用了moment.js,这个moment.js里面带有很多格式化日期的操作,完全不用自己再去闭门造轮子了
相关文章推荐
- 修复bootstrap daterangepicker不能清空日期的问题
- 解决jquery的datepicker的本地化以及Today问题
- bootstrap之双日历时间段选择控件—daterangepicker(汉化版)
- Android 日期选择器、日期范围选择器:MaterialDateRangePicker
- daterangepicker时间段选择插件使用
- 双日历时间段选择控件—daterangepicker(汉化版)
- 解决jquery的datepicker的本地化以及Today问题
- Java写的手机计费系统(作为学习参考的实例:关键是Java类库里面的date和Calendar的使用和相互转换,以及一些日期的实际问题)
- daterangepicker日期选择控件
- android—DatePicker 和TimePicker显示日期以及使用TimePickerDialog,DatePickerDialog来专门实现时间选择对话框
- git初始化操作以及一些问题的解决
- sql plus不能初始化以及sqlplus自动关闭的问题
- daterangepicker-bootstrap之双日历时间段选择控件(汉化版)
- bootstrap双日历时间段选择控件—daterangepicker(汉化版)
- daterangepicker bootstarp 日期范围选择控件使用注意事项
- Ext DateField 控件的日期选择控件DatePicker 布局 显示异常问题
- 使用jquery.daterange.js双日历控件时,daterangepicker初始化默认日期
- JQuery UI datepicker在选择startDate与endDate时手动清空数据后,时间选择依然有限制问题!
- Android控件之DatePicker、TimePicker焦点问题(有些手机不能手动输入)
- daterangepicker的时间参数问题