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日期格式。

 var regex = /^(\d{4})(\d{2})(\d{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放心里。

Bootstrap中datetimepicker日期控件1899年问题解决的更多相关文章

  1. bootstrap中使用日历控件

    在bootstrap中使用日历控件可以参照以下资料: http://www.bootcss.com/p/bootstrap-datetimepicker/index.htm 以下是参照此资料自己做的一 ...

  2. mvc4中jquery-ui日期控件datepicker的应用

    mvc4中jquery-ui日期控件datepicker的应用 本文适合mvc中日期选择需要的同学: 假设读者已经具备了mvc4和javascript中的相关知识 一. 开始项目之前把项目中目录:/C ...

  3. VB 中DTpicker日期控件的运用

    1.如何加载 VB默认的控件栏中是没有DTpicker日期控件的,添加过程:工具--部件--控件--"Microsoft  Windows Common Controls-2.6.0&quo ...

  4. Delphi 在DLL中使用DevExpress控件时出错解决办法

    测试环境 DevExpress VCL 14.1.3 和XE7 问题:在dll使用cxGrid控件时  如果不添加列标题 则不报错   查询无数据集显示,如果加上标题 就报错了 这段为报错部分 fun ...

  5. jQuery DateTimePicker 日期控件

    在线实例 实例演示 使用方法 <input id="datetimepicker" type="text" > 复制 $('#datetimepic ...

  6. js中的日期控件My97 DatePicker---那些打酱油的日子

    使用WdatePicker插件来渲染日期类型的页面. 以下代码用到的属性有: isShowClear是否显示清空按钮 skin皮肤的样式 readOnly是否只读 maxDate:最大的选择时间 &l ...

  7. bootstrap 模态框日期控件datepicker被遮住问题的解决

    找到日期输入框,并将  .class 属性的 z-index 改大 在JSP页添加样式: 这样就OK了:

  8. 【ExtJs】ext前台中的日期控件传输时间到后台的转换保存过程

    //前台日期选择框 {fieldLabel:, padding: ',afterLabelTextTpl: required,allowBlank: false,format: 'Y-m-d H:i: ...

  9. js中的日期控件My97 DatePicker

    使用WdatePicker插件来渲染日期类型的页面. 以下代码用到的属性有: isShowClear是否显示清空按钮 skin皮肤的样式 readOnly是否只读 maxDate:最大的选择时间 &l ...

随机推荐

  1. css心跳动画

    1.图片无限放大缩小,类似心跳 css如下 @keyframes scaleDraw { /*定义关键帧.scaleDrew关键帧名称*/ 0%{ transform: scale(1); /*开始为 ...

  2. jqgrid 设置行编辑为本地端编辑状态

    有时,我们需要在jqgrid表格中做编辑操作,而jqgrid默认是启动了行保存连接到服务器更新.此时,如果没有指定editurl的有效url值时会报错 有时,我们需要将编辑完的表格数据一次性提交保存( ...

  3. WebHook之PHP实践@coding.net

    次写完代码, 打开FileZilla, 把写好的文件上传到vps上, 久而久之觉得腻烦, 寻思有没有更geek的方法, 便有此文. WebHook是跟随着Git而兴起的技术, 当你push到服务器的时 ...

  4. jpbm工作流框架

    一:JBPM是什么?有什么用?能解决什么问题? 现实生活中有很多需要走一些流程的过程,比如请假流程,报销流程等,使用工作流框架,即可写一个流程即可,添加流程时不在繁琐的建立新的各种配置. 1:jBPM ...

  5. JS 01 变量_数据类型_分支循环_数组

    点击直通车↓↓↓ 数据类型及数据类型的手动转换 数组 一.概念 JavaScript(JS)是一种基于对象和事件驱动.且可以与HTML标记语言混合使用的脚本语言,其编写的程序可以直接在浏览器中解释执 ...

  6. 微服务RPC框架选美

    原文:http://p.primeton.com/articles/59030eeda6f2a40690f03629 1.RPC 框架谁最美? Hello,everybody!说到RPC框架,可能大家 ...

  7. Hibernate一对多关联关系保存时的探究

    在以前使用hibernate时,经常对保存存在关联关系的对象时,不确定是否能保存成功.    因此,特意对一对多关系的2个对象进行实践. 一.pojo类和配置文件的准备         这里有一点提前 ...

  8. [Oracle]如何为数据库设置Event(eg: ORA-00235)

    [Oracle]如何为数据库设置Event(eg: ORA-00235) ■ When you use SPFILE, Setting procedure: 1. Check the current ...

  9. java maven项目迁移时缺失jar包 或者 maven jar包缺失时的解决方案

    这样弄完,jar包就都下载好了,就不缺失了. 从GitHub上checkout一个项目下来,导入idea后发现加载依赖奇慢无比,所以临时把网络调成FQ的代理,结果会发现idea会停止之前的下载,那怎么 ...

  10. python实现并发爬虫

    在进行单个爬虫抓取的时候,我们不可能按照一次抓取一个url的方式进行网页抓取,这样效率低,也浪费了cpu的资源.目前python上面进行并发抓取的实现方式主要有以下几种:进程,线程,协程.进程不在的讨 ...