bootstrap-datetimepicker的功能优化
2014-12-23 17:46
120 查看
摘要: bootstrap datetimepicker 定制
开空间第一个博客,送给bootstrap-datetimepicker吧!
最近项目中第一次使用了BS,还是遇到不少问题和坑。我简单说一下我的解决办法。
引用:bootstrap 和 bootstrap-datetimepicker CSS文件
Jquery bootstrap 和 bootstrap-datetimepicker datetimepicker .zh-CN等JS文件。
首先封装一下自己的函数,直接能显示年、年月、年月日,用起来顺手。设置好起始和最小视图。
调用时,就简单了:放一个<input type="text" value="201205" id="datetimepicker">元素
$('#datetimepicker2').autoBSN(); //年选择
$('#datetimepicker').autoBSNy();//年月选择
$('#datetimepicker1').autoBSNyr();//年月日选择
取值是:$('#datetimepicker1').data('date');
以下是各种填坑(其实就是我定制优化一些地方)
1、有时候显示不出图标,左右箭头!
原因:datetimepicker支持Bootstrap2和3,它给渲染成bs2的模式了,因为我项目基于BS3.1.1。所以直接让它按3渲染即可:
原代码:this.bootcssVer = this.isInput ? (this.element.is('.form-control') ? 3 : 2) : (this.bootcssVer。。。。。
修改为:this.bootcssVer = 3; // 直接阉割,2个球球直接变为1个球!
2、年月格式:yyyymm不识别的问题。
<input type="text" value="201205" id="datetimepicker"> $('#datetimepicker').autoBSNy();
代码如上,现象描述:初始年月显示201205,一旦选择,就变为1899年了。
原因:老外可能不习惯201205这个格式,但我处处都是用这个格式的。作者解析原值时,代码:
this.nonpunctuation=/[^ -\/:-@\[-`{-~\t\n\rTZ]+/g,
parts = date && date.match(this.nonpunctuation) || [];
而正则表达式看不太懂,大概要求必须有 - :等分割符。总之我的201205就分割不出来,运行后是['201205']
把代码修改为:
代码好不好不知道,总之上面代码解决了问题,还是小有成就感!
3、年月视图显示四列三行,不符合1年四个季度,一个季度3个月的标准,修改为四行三列吧!
方法就是打开firebug等调试工具,把宽度变为30%或33%,然后就是调height line-height,使面板变小一点。
代码就不贴了!
以上是我遇到的一些坑,特别是第2个,百度不到解决方法的!写下这个留给需要人的吧!
开空间第一个博客,送给bootstrap-datetimepicker吧!
最近项目中第一次使用了BS,还是遇到不少问题和坑。我简单说一下我的解决办法。
引用:bootstrap 和 bootstrap-datetimepicker CSS文件
Jquery bootstrap 和 bootstrap-datetimepicker datetimepicker .zh-CN等JS文件。
首先封装一下自己的函数,直接能显示年、年月、年月日,用起来顺手。设置好起始和最小视图。
$.fn.autoBSN = function (options) { var opt = { format: 'yyyy' } $.extend(opt, options); if (this.is('input[type=text]')) { this.datetimepicker({ format: opt.format, weekStart: 1, autoclose: true, startView: 4, minView: 4, forceParse: false, //必须设置,否则每次解析错,会变成1899年。 language: 'zh-CN' }); } return this; }; $.fn.autoBSNy = function (options) { var opt = { format: 'yyyymm' } $.extend(opt, options); if (this.is('input[type=text]')) { this.datetimepicker({ format: opt.format, weekStart: 1, autoclose: true, startView: 3, minView: 3, forceParse: false, //必须设置,否则每次解析错,会变成1899年。 language: 'zh-CN' }); } return this; }; $.fn.autoBSNyr = function (options) { var opt = { format: 'yyyy-mm-dd' } $.extend(opt, options); if (this.is('input[type=text]')) { this.datetimepicker({ format: opt.format, weekStart: 1, autoclose: true, startView: 2, minView: 2, forceParse: false, language: 'zh-CN' }); } return this; };
调用时,就简单了:放一个<input type="text" value="201205" id="datetimepicker">元素
$('#datetimepicker2').autoBSN(); //年选择
$('#datetimepicker').autoBSNy();//年月选择
$('#datetimepicker1').autoBSNyr();//年月日选择
取值是:$('#datetimepicker1').data('date');
以下是各种填坑(其实就是我定制优化一些地方)
1、有时候显示不出图标,左右箭头!
原因:datetimepicker支持Bootstrap2和3,它给渲染成bs2的模式了,因为我项目基于BS3.1.1。所以直接让它按3渲染即可:
原代码:this.bootcssVer = this.isInput ? (this.element.is('.form-control') ? 3 : 2) : (this.bootcssVer。。。。。
修改为:this.bootcssVer = 3; // 直接阉割,2个球球直接变为1个球!
2、年月格式:yyyymm不识别的问题。
<input type="text" value="201205" id="datetimepicker"> $('#datetimepicker').autoBSNy();
代码如上,现象描述:初始年月显示201205,一旦选择,就变为1899年了。
原因:老外可能不习惯201205这个格式,但我处处都是用这个格式的。作者解析原值时,代码:
this.nonpunctuation=/[^ -\/:-@\[-`{-~\t\n\rTZ]+/g,
parts = date && date.match(this.nonpunctuation) || [];
而正则表达式看不太懂,大概要求必须有 - :等分割符。总之我的201205就分割不出来,运行后是['201205']
把代码修改为:
var parts; if (date.match(/\d{6}/g)) parts = date.match(/(\d{4})|(\d{2})/g); else parts = date && date.match(this.nonpunctuation) || [];
代码好不好不知道,总之上面代码解决了问题,还是小有成就感!
3、年月视图显示四列三行,不符合1年四个季度,一个季度3个月的标准,修改为四行三列吧!
方法就是打开firebug等调试工具,把宽度变为30%或33%,然后就是调height line-height,使面板变小一点。
代码就不贴了!
以上是我遇到的一些坑,特别是第2个,百度不到解决方法的!写下这个留给需要人的吧!
相关文章推荐
- bootstrap-datetimepicker 时间日期插件
- bootstrap-datetimepicker 的使用
- bootstrap datetimepicker定位不准确问题
- 关于bootstrap-datetimepicker 插件的配置参数详解
- bootstrap datetimepicker bug 页面产生滚动会错位
- bootstrap-datetimepicker 的使用
- 关于Bootstrap日期控件datetimepicker被模态框等遮罩在底部的问题及解决办法。
- Angularjs与bootstrap.datetimepicker结合实现日期选择器
- bootstrap datetimepicker 插件语言选择
- BootStrap-datetimepicker插件有滚动条时出现位移问题解决方案
- bootstrap-datetimepicker在经过GC(Google Closure Compiler)压缩后无法使用的解决方案
- bootstrap-datetimepicker出现时间选择时年份显示1899年的异常
- bootstrap datetimepicker的时间变成1899年
- bootstrap的datepicker、datetimepicker和jquery的datepicker使用心得
- bootstrap-datetimepicker bootstrap选择日期
- bootstrap-datetimepicker.js插件
- bootstrap datetimepicker 用法
- bootstrap-datetimepicker的运用点滴
- datetimepicker-bootstrap默认年份1899修改问题
- bootstrap-datetimepicker.js 设置开始时间的Bug。