bootstrap-datetimepicker的功能优化

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏全沾开发(huā)

函数节流与函数防抖

函数节流与函数防抖 函数节流和函数防抖是一个老生常谈的话题了,两者都是对大量频繁重复调用代码的一种优化方案 今天在某群和大家讨论时,顺便搜了一些相关博客 发现...

4556
来自专栏walterlv - 吕毅的博客

为带有多种语言的 Jekyll 博客添加多语言选择

发布于 2018-03-06 06:47 更新于 2018-09...

1791
来自专栏技术博文

关于微信二次分享,标题变链接的解决方法(二)----代码部分

声明: 本篇博文只是个人工作中的分享总结,仅代表个人观点,虽然解决了不少网友的问题,但同时也引来了一些网友的不满,所以特此声明,当您遇到本博文解决不了的问题,可...

3686
来自专栏一个会写诗的程序员的博客

一篇文章读懂 React and redux 前端开发 -DvaJS, a lightweight and elm-style framework.快速上手Dva 概念 #例子和脚手架Dva 图解K

DvaJS: React and redux based, lightweight and elm-style framework.

2113
来自专栏何俊林

SuperIndicator开源库源码分析

背景:为什么有这个库,在经常开发中,会碰到,显示广告位图片,精彩推荐,及比较好的,希望能直观显示到用户看的。那么SuperIndicator正是这样一个类库。 ...

2035
来自专栏一“技”之长

iOS8新特性扩展(Extension)应用之三——照片编辑插件

        通过前几篇博客的介绍,我们了解到扩展给app提供的更加强大的交互能力,这种强大的交互能力另一方面体现在照片编辑插件的应用。

912
来自专栏磐创AI技术团队的专栏

机器学习新手必看:Jupyter Notebook入门指南

2162
来自专栏腾讯IVWEB团队的专栏

移动端 tryjs 异常捕获

上周处理了一下群活动的 badjs ,第一步是摆脱` Script error .`,捕获异常栈,找到自己是错在哪里? 分享一下移动端 tryjs 异常捕获的步...

3670
来自专栏张善友的专栏

Expression Web设计工具

从MS company store买了个Expression web软件,在Vista下安装了一个,今后可以用这个工具和Vistual studio 2005协...

19810
来自专栏IT派

机器学习新手必看:Jupyter Notebook入门指南

【导读】Jupyter Notebook 是一个 Web 应用程序,便于创建和共享文学化程序文档,支持实时代码、数学方程、可视化和 Markdown,其用途包括...

4354

扫码关注云+社区

领取腾讯云代金券