文档章节

bootstrap-datetimepicker的功能优化

noonoo
 noonoo
发布于 2014/06/13 11:29
字数 676
阅读 1422
收藏 0

开空间第一个博客,送给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个,百度不到解决方法的!写下这个留给需要人的吧!


© 著作权归作者所有

共有 人打赏支持
noonoo
粉丝 15
博文 65
码字总数 34256
作品 0
深圳
程序员
加载中

评论(5)

Turman
Turman
我喜欢!!
Turman
Turman
这个论坛的评论做得真好
Turman
Turman
评论好快啊
Turman
Turman
一点不好玩
Turman
Turman
这是什么东东
KoalaUI的DateTimePicker的若干问题解答

DateTimePicker控件怎样才能只精确到分,而不显示秒? 答:在初始化参数时,修改pickSeconds为false即可,例如$("#picker").datetimepicker({pickSeconds: false}) DateTimePicker如何只显示日...

黑人牙膏
2014/05/07
0
0
bootstrapdatetimepicker插件汉化、日期初始化等使用记录

两个表单元素:开始日期和结束日期,先汉化。然后把开始日期的初始化时间设置为当月第一天,结束日期的初始化时间为当月最后一天。 $.fn.datetimepicker.dates['zh-CN'] = { days: ["星期日"...

Ethel_oo
04/21
0
0
YII2 少用的一些扩展 插件等功能 自定义操作按钮 时间插件_会点击不生效---原因可能是有的公司会对框架进行修改,影响到了, 自己下载的项目中可以正常使用 --网上很少有遇到这个问题的.

[ 'attribute' => 'status', 'label' => '状态', 'value' => function ($model) { return $model->status == 1 ? '开启' : '关闭'; }, ], [ 'class' => 'yiigridActionColumn', 'template' =......

兔子想飞
05/23
0
0
bootstrap datetimepicker日期插件简单使用方法

1.github下载资源包 http://www.bootcss.com/p/bootstrap-datetimepicker/ 2.引入bootstrap-datetimepicker.min.css和bootstrap-datetimepicker.min.js 3.中文包 bootstrap-datetimepicker.z......

Rhymo-Wu
07/10
0
0
基于Django+Bootstrap框架,可视化展示内存监控信息

构思过程:  一开始单纯的写了个内存监控的脚本,每隔5分钟收集服务器的内存信息,然后将收集到的数据写进数据库中,但后来发现就算把收集的信息写入数据库,如果需要查询某个时段的内存信息...

Java架构解析
09/20
0
0

没有更多内容

加载失败,请刷新页面

加载更多

原型模式

1、原型模式-定义 用原型实例指定创建对象的种类,并且通过拷贝这些原型创建新的对象 克隆(浅度克隆->拷贝值类型或者引用,深度克隆->创建新的对象,开辟新的内存) 例如客户端知道抽象Pro...

阿元
50分钟前
5
0
awk命令扩展使用操作

awk 中使用外部shell变量 示例1 [root@centos01 t1022]# A=888[root@centos01 t1022]# echo "" | awk -v GET_A=$A '{print GET_A}'888[root@centos01 t1022]# echo "aaaaaaaaaaaaa" | aw......

野雪球
今天
10
0
深入解析MySQL视图VIEW

Q:什么是视图?视图是干什么用的? A:视图(view)是一种虚拟存在的表,是一个逻辑表,本身并不包含数据。作为一个select语句保存在数据字典中的。   通过视图,可以展现基表的部分数据;...

IT--小哥
今天
13
0
虚拟机学习之二:垃圾收集器和内存分配策略

1.对象是否可回收 1.1引用计数算法 引用计数算法:给对象中添加一个引用计数器,每当有一个地方引用它时,计数器值就加1;当引用失效时,计数器值就减1;任何时候计数器值为0的对象就是不可能...

贾峰uk
今天
10
0
smart-doc功能使用介绍

smart-doc从8月份底开始开源发布到目前为止已经迭代了几个版本。在这里非常感谢那些敢于用smart-doc去做尝试并积极提出建议的社区用户。因此决定在本博客中重要说明下smart-doc的功能,包括使...

上官胡闹
昨天
19
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部