前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Bootstrap中datetimepicker日期控件1899年问题解决

Bootstrap中datetimepicker日期控件1899年问题解决

作者头像
半指温柔乐
发布2018-12-14 11:15:45
2.3K0
发布2018-12-14 11:15:45
举报
文章被收录于专栏:前端知识分享前端知识分享

 Bootstrap中datetimepicker日期控件1899年问题解决

  最近在开发项目的过程中,遇到一个很尴尬的问题。我们项目一直采用的是angular+bootstrap,日期控件用的是bootstrap中的datetimepicker,这个日期控件存在一个bug,当用户输入日期时,日期控件会自动跳到1899年,这个用户体验特别不好,一不小心就可能点错了。因为我们的项目中涉及的日期非常多,所以领导强烈要求我们前端解决这个问题,并且需要支持yyyy-MM-dd、yyyy/MM/dd、yyyy.MM.dd、yyyyMMdd等四种格式的兼容。作为前端中的一员,我不遗余力去从网上找答案,在百度上找了好几天,没有结果。就在最后,我忽然想到了github,在这上面我找到了我想要的答案。下面和大家分享一下。

  一、存在问题

    当用户输入日期时,控件会自动跳到1899年。至于为什么是1899年,老大说,1899是控件支持的最小日期。我还以为是1899年诞生的(可笑)。

  二、解决方法

  1、修改bootstrap-datetimepicker源码

    将控件默认的1899年改为默认当前日期。

  2、支持的多种格式

    其实datetimepicker默认支持yyyy-MM-dd、yyyy/MM/dd、yyyy.MM.dd三种日期格式,另外一种yyyyMMdd需要我们自己在代码中实现。

    我实现的方法是当用户输完日期后,用正则表达式,将八位数转换为yyyy-MM-dd日期格式。

代码语言:javascript
复制
1 var regex = /^(\d{4})(\d{2})(\d{2})$/;
2 return date.replace(regex, "$1-$2-$3");

  3、需要注意的问题

datetimepicker属性forceParse,   Boolean. 默认值: true

  当选择器关闭的时候,是否强制解析输入框中的值。也就是说,当用户在输入框中输入了不正确的日期,选择器将会尽量解析输入的值,并将解析后的正确值按照给定的格式format设置到输入框中。这个属性就默认支持yyyy-MM-dd、yyyy/MM/dd、yyyy.MM.dd三种日期格式转换为自定义的格式。

  经过这个问题,我突然发现,每次解决问题,我找答案的途径都太单一,每次都是当我快要放弃的时候,才会想到其他的途径。致自己一句话,没有什么是github上没有的,时刻把github放心里。

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2018-11-18 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  •  Bootstrap中datetimepicker日期控件1899年问题解决
    •   一、存在问题
      •   二、解决方法
        •   1、修改bootstrap-datetimepicker源码
          •   2、支持的多种格式
            •   3、需要注意的问题
            领券
            问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档