文档章节

bootstrap-datetimepicker的功能优化

noonoo
 noonoo
发布于 2014/06/13 11:29
字数 676
阅读 1409
收藏 0
点赞 2
评论 5

开空间第一个博客,送给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
粉丝 14
博文 57
码字总数 28625
作品 0
深圳
程序员
加载中

评论(5)

Turman
Turman
我喜欢!!
Turman
Turman
这个论坛的评论做得真好
Turman
Turman
评论好快啊
Turman
Turman
一点不好玩
Turman
Turman
这是什么东东
bootstrapdatetimepicker插件汉化、日期初始化等使用记录

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

Ethel_oo ⋅ 04/21 ⋅ 0

huangdf/seezoon-framework-all

项目介绍 基于spring,mybatis,shiro面向接口开发的的一套后台管理系统,方便快速开发;采用常用的技术栈,降低学习成本,项目完全前后端分离,后端定义统一的接口格式,统一参数校验,统一权...

huangdf ⋅ 04/20 ⋅ 0

Vant 1.1.4 发布,有赞轻量级移动端 Vue 组件库

Vant 1.1.4 已发布,更新如下: Breaking changes van-field 组件添加 label slot #1041 AddressEdit组件 点击删除收货地址时弹出的Dialog.confirm只有confirm事件cancel貌似没有ww #1035 To...

王练 ⋅ 05/19 ⋅ 0

Bootstrap 3时间控件datetimepicker的时区及多语言问题

文章作者:Tyan 博客:noahsnail.com 在Web应用开发中,特别是前端开发中,经常会碰到的一个问题是时间选择问题,幸好Bootstrap已经为我们提供了时间选择控件datetimepicker,但在datetimep...

Quincuntial ⋅ 2016/09/09 ⋅ 0

推荐 10 款基于 Bootstrap 框架的扩展

Bootstrap是快速开发Web应用程序的前端工具包。它是一个CSS和HTML的集合,它使用了最新的浏览器技术,给你的Web开发提供了时尚的版式,表单,buttons,表格,网格系统等等。 本文推荐 10 款基...

oschina ⋅ 2013/06/21 ⋅ 32

boostrap时间控件

1:引入相应的css和js css: <link href="<%=path%>/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> <link href="<%=path%>/css/bootstrap-datetimepicker.css" rel="styleshee......

赵作文 ⋅ 2015/09/28 ⋅ 0

boot的常用链接

1 中文网站 http://www.bootcss.com/ 2 时间控件 http://www.bootcss.com/p/bootstrap-datetimepicker/ http://tarruda.github.io/bootstrap-datetimepicker/ 3 开关控件 http://www.bootcss......

Tmac ⋅ 2015/03/23 ⋅ 0

Bootstrap~日期控制

一个成熟的框架,日期控制是少不了的,在网上也有很多日期控制可以选择,而主框架用了bootstrap,日期控制也当前要用它自己的, 控件地址:http://www.bootcss.com/p/bootstrap-datetimepick...

mcy247 ⋅ 2017/12/06 ⋅ 0

bootstrap-datetimepicker 的使用

在web开发中,难免会用到时间选择控件,也正好也在使用bootstrap,所以就找到了bootstrap-datetimepicker 这个插件,下面把这个插件的使用记录一下,以做备忘。 1、前期准备(以下文件在下载的...

子璐 ⋅ 2014/01/23 ⋅ 0

shenzhanwang/S2SH

S2SH Struts2,Hibernate,Spring三大框架的整合总是很麻烦,在此提供一个已经整合好三大框架的包,可以直接下载导入Myeclipse使用,项目基于Maven做依赖管理。 其中包含的内容如下: 1.Struts...

shenzhanwang ⋅ 2016/11/16 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Mahout基于内存的DataMode 推荐引擎Demo2

Mahout基于内存的DataMode 推荐引擎Demo2 //注释的部分是基于文件也可以理解为基于日志文件的, //DataModel 可以有很多种,实现abstractDataMode的子类,原则上都可以作为数据源,个人觉得,...

xiaomin0322 ⋅ 20分钟前 ⋅ 0

Docker部署Tomcat及Web应用

一、在线下载docker yum install -y epel-releaseyum install docker-io # 安装dockerchkconfig docker on # 加入开机启动service docker start # 启动docker服务 1 ...

Jeam_ ⋅ 20分钟前 ⋅ 0

研发运营一体化能力成熟度模型

研发运营一体化是指在 IT 软件及相关服务的研发及交付过程中,将应用的需求、开发、测试、部 署和运营统一起来,基于整个组织的协作和应用架构的优化,实现敏捷开发、持续交付和应用运营的无...

stars永恒 ⋅ 26分钟前 ⋅ 0

jQuery缩小放大触发事件

jquery的resize()方法使用 <html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> var i = 0; $(document).ready(function(){ ......

RobertZou ⋅ 26分钟前 ⋅ 0

eclipse python 搭建

https://jingyan.baidu.com/article/9113f81b68ebce2b3214c7e0.html https://www.cnblogs.com/ZhangRuoXu/p/6397756.html https://blog.csdn.net/zhangphil/article/details/78962159 字符集......

之渊 ⋅ 26分钟前 ⋅ 0

weex,react native,flutter

weex: 一次编写,处处运行 RN: 学一次,到处写(针对安卓,IOS平台特性 各自写,会有很大一部分是一样的代码) 这些方案是否真正的解决了跨平台问题呢?从目前的状况来看,很显然是没有的,因...

东东笔记 ⋅ 33分钟前 ⋅ 0

Spring Cloud微服务分布式云架构-集成项目

Spring Cloud集成项目有很多,下面我们列举一下和Spring Cloud相关的优秀项目,我们的企业架构中用到了很多的优秀项目,说白了,也是站在巨人的肩膀上去整合的。在学习Spring Cloud之前大家必...

明理萝 ⋅ 37分钟前 ⋅ 1

SpringMVC图片上传问题解决

当我们上传图片时一直发现: MultipartFile file = null; if (request instanceof MultipartHttpServletRequest) 匹配不上, 解决方案: 在前端xml加入如下配置代码即可 <!-- 图片上传bean --...

泉天下 ⋅ 40分钟前 ⋅ 0

Spring表达式语言(SpEL)

1、SpEL引用 Spring EL在bean创建时执行其中的表达式。此外,所有的Spring表达式都可以通过XML或注解的方式实现。下面将使用Spring表达式语言(SpEL),注入字符串,整数,Bean到属性。 SpEL的...

霍淇滨 ⋅ 56分钟前 ⋅ 0

Gradle使用阿里云镜像

gradle 生命周期中有一个初始化( Initialization )的过程,这个过程运行在 build script 之前,我们可以在这个地方做一点系统全局的设置,如配置仓库地址。 你可以在以下几个位置实现仓库地址...

明MikeWoo ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部