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 ...
随机推荐
- Windows/Linux获取当前运行程序的绝对路径
windows 获取当前运行程序的绝对路径(.exe) GetModuleFileNameA()函数获取绝对路径,不过文件路径中的反斜杠需要进行替换. ]; GetModuleFileNameA(NU ...
- Vue购物车
index.html <!DOCTYPE html><html> <head> <meta charset="utf-8&quo ...
- Android 一个相对完整的自动升级功能实现代码
由于项目的需要最近做了一个关于Android自动升级的功能,下面将贴出Android手机客户端的完整代码.这段代码参考别的代码居多,由于不满足需求,所以自己仅仅改了一些需要变动的内容,其他功能都是按照 ...
- 处女男学Android(七)---Android 应用资源之StateListDrawable
前言 本篇Blog将记录关于Android应用资源中最经常使用的一个Drawable资源--StateListDrawable,本来说应当继续写UI方面的内容,突然跳到应用资源这边,主要是由于之前写界 ...
- test zhenai
web.Document.InvokeScript("eval",new string[]{"document.getElementById('passwordbt'). ...
- Oracle中,如何查看FRA(Flashback Recovery Area)的利用率
例子: SQL> set linesize 300SQL> select * from V$RECOVERY_AREA_USAGE; FILE_TYPE PERCENT_SPACE_USE ...
- MFC如何为程序添加图标
1.找几幅Ico格式的图片,可以在电脑中查找.ico一般都会找到.然后将ico文件放在工程目录下的res文件夹下. 2.点击菜单栏->编辑->添加资源->导入,选择res文件夹中将要 ...
- C#Unit单元测试之读取Web.config文件
长期一来,我们所完成的项目都没有写单元测试,今天我一时兴起,决定给自己写的代码写单元测试,简单的测试代码分分钟完成了,一运行测试,就懵逼了.没能达到我的预期效果,而是出现图1所示错误. 图1:单元测试 ...
- R语言学习 第四篇:函数和流程控制
变量用于临时存储数据,而函数用于操作数据,实现代码的重复使用.在R中,函数只是另一种数据类型的变量,可以被分配,操作,甚至把函数作为参数传递给其他函数.分支控制和循环控制,和通用编程语言的风格很相似, ...
- Git管理多个SSH密钥,Git多帐号配置
版权声明:转载须标明本文转自严振杰的博客 https://blog.csdn.net/yanzhenjie1003/article/details/69487932版权声明:转载必须注明本文转自严振杰 ...