Bootstrap中datetimepicker日期控件1899年问题解决
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年问题解决的更多相关文章
- bootstrap中使用日历控件
在bootstrap中使用日历控件可以参照以下资料: http://www.bootcss.com/p/bootstrap-datetimepicker/index.htm 以下是参照此资料自己做的一 ...
- mvc4中jquery-ui日期控件datepicker的应用
mvc4中jquery-ui日期控件datepicker的应用 本文适合mvc中日期选择需要的同学: 假设读者已经具备了mvc4和javascript中的相关知识 一. 开始项目之前把项目中目录:/C ...
- VB 中DTpicker日期控件的运用
1.如何加载 VB默认的控件栏中是没有DTpicker日期控件的,添加过程:工具--部件--控件--"Microsoft Windows Common Controls-2.6.0&quo ...
- Delphi 在DLL中使用DevExpress控件时出错解决办法
测试环境 DevExpress VCL 14.1.3 和XE7 问题:在dll使用cxGrid控件时 如果不添加列标题 则不报错 查询无数据集显示,如果加上标题 就报错了 这段为报错部分 fun ...
- jQuery DateTimePicker 日期控件
在线实例 实例演示 使用方法 <input id="datetimepicker" type="text" > 复制 $('#datetimepic ...
- js中的日期控件My97 DatePicker---那些打酱油的日子
使用WdatePicker插件来渲染日期类型的页面. 以下代码用到的属性有: isShowClear是否显示清空按钮 skin皮肤的样式 readOnly是否只读 maxDate:最大的选择时间 &l ...
- bootstrap 模态框日期控件datepicker被遮住问题的解决
找到日期输入框,并将 .class 属性的 z-index 改大 在JSP页添加样式: 这样就OK了:
- 【ExtJs】ext前台中的日期控件传输时间到后台的转换保存过程
//前台日期选择框 {fieldLabel:, padding: ',afterLabelTextTpl: required,allowBlank: false,format: 'Y-m-d H:i: ...
- js中的日期控件My97 DatePicker
使用WdatePicker插件来渲染日期类型的页面. 以下代码用到的属性有: isShowClear是否显示清空按钮 skin皮肤的样式 readOnly是否只读 maxDate:最大的选择时间 &l ...
随机推荐
- Flask 邮件发送
欢迎关注小婷儿的博客: csdn:https://blog.csdn.net/u010986753 博客园:http://www.cnblogs.com/xxtalhr/ 有问题请在博客下留言或加QQ ...
- form表单,submit,ajax提交
尼玛... 一个简单的表单提交,竟然给我整的直郁闷. 本来就是个保存功能,几个前人都用的ajax提交,我也就没改成submit.然后坑爹的就来了. 我在表单里写了个<form></f ...
- 【本地服务器】windows下nginx安装操作教程
1.下载nginx 下载地址: (可选择下载 Stable version 版本) 2.把安装放到C盘或其他盘的根目录,并解压文件压缩包,可以重命名解压的文件夹,方便找到路径 (注意不要直接双击 ...
- 翻译 | The Principles of OOD 面向对象设计原则
本文首发于vivo互联网技术微信公众号 https://mp.weixin.qq.com/s/Q_pziBUhKRywafKeY2T7YQ 作者:Robert C. Martin 翻译:张硕 本文由来 ...
- Cloud Foundry 组件
原文:https://blog.csdn.net/little_crab_0924/article/details/78022391 Cloud Foundry 组件概述 Cloud Foundry ...
- 20155202《网络对抗》Exp9 web安全基础实践
20155202<网络对抗>Exp9 web安全基础实践 实验前回答问题 (1)SQL注入攻击原理,如何防御 SQL注入产生的原因,和栈溢出.XSS等很多其他的攻击方法类似,就是未经检查或 ...
- 20155204 2016-2017-2 《Java程序设计》第1周学习总结
20155204 2016-2017-2 <Java程序设计>第1周学习总结 一.学习考核方式,理解成绩构成 首先是100分的构成,主要分为周考的总计60,实验的15分,团队项目(博客报告 ...
- DeepFM算法解析及Python实现
1. DeepFM算法的提出 由于DeepFM算法有效的结合了因子分解机与神经网络在特征学习中的优点:同时提取到低阶组合特征与高阶组合特征,所以越来越被广泛使用. 在DeepFM中,FM算法负责对一阶 ...
- CS229笔记:支持向量机
考虑一个分类问题,用\(1\)表示正类标签,用\(-1\)表示负类标签,引入假设函数\(h\): \[ \begin{align*} g(z) &= \begin{cases} 1 & ...
- Codeforces 954C Matrix Walk (思维)
题目链接:Matrix Walk 题意:设有一个N×M的矩阵,矩阵每个格子都有从1-n×m的一个特定的数,具体数的排列如图所示.假设一个人每次只能在这个矩阵上的四个方向移动一格(上下左右),给出一条移 ...