坑人的toLocaleDateString和简单地跳坑方式
最近在做一个一个医学大数据的项目的时候,独立设计、构思、制作了完成了一个生命历程图的功能。既然设计到时间,那就免不了对Date对象进行一系列的操作,也就免不了对日期对象进行一系列的格式化。走的路多了,难免遇到坑。其中toLocaleDateString就是一个天坑。
今天,上司和我说:“阿伦啊,你那个小卡片领导有点不满意啊,你再研究一下。”于是乎,我就开始了和UI的深入浅出地研究,最终定下了一版,我成功地把他实现了。当时我就跑到项目组每个人的电脑前让他们瞅瞅,我当时的想法是这样的:
但是,等等?what?纳尼?(⊙o⊙)?我在项目组数据分析师的电脑上看到了惊悚的一幕,类似这样的:
我有跑回去瞅了一下我的电脑,依旧完美地运行着。那么问题是什么呢?打开数据分析师的浏览器控制台,发现了一个报错“Unable to get property ‘mouths’ of undefined or null refernce”,虽然我属于英语困难户类型的,但是这句话也能猜个八九不离十,大概就是这个属性没找到。我分别对其上一层对象进行了打印,结果在我这里正常,在同事那里就是undefind。那么问题就来了,数据分析师使用的是搜狗浏览器,而博主使用的是chrome浏览器。因此,很可能是兼容的问题。于是乎,博主继续向上级打印。发现有一个数据dateEnd在我这里为“2018/3/2”,在同事那里是“2018年3月2日”。原因找到了,我在对这个数据进行处理的时候使用了字符串转数组的split('/'),但是问题是‘2018年3月2日’并没有“-”,所以只能被转换成了length为1的['2018年3月2日'],因此无法进行下一步处理了。
我研究了一下搜狗浏览器,发现其和360浏览器差不多,都有兼容模式和极速模式。兼容模式是使用了ie的内核,极速模式使用了webkit内核。而这个项目暂时是用ip地址登陆的,所以无意间触发了ie的Trident内核,因此引发了某些兼容问题。
找到问题后,博主查看了一下这个日期数据的来源,发现是一个代码"new Date().toLocaleDateString()",即对当前的额日期数据进行格式化。于是乎,我分别在chrome浏览器和ie浏览器打印了一下,得到的结果分别是"2018/3/2"和"2018年3月2日"。
博主去MDN查找相关属性,结果发现了这样一段话“toLocaleDateString()
方法返回该日期对象日期部分的字符串,该字符串格式因不同语言而不同。新增的参数 locales
和 options
使程序能够指定使用哪种语言格式化规则,允许定制该方法的表现(behavior)。在旧版本浏览器中, locales
和 options
参数被忽略,使用的语言环境和返回的字符串格式是各自独立实现的。”貌似以前错过了什么,居然还有参数。也就是说不配置参数的话可能结果会随着浏览器的变化而变化。
经过测试,楼主发现在不同的浏览器结果是这样的:
# firefox
> new Date().toLocaleDateString()
> "2017/5/12" #IE11
> new Date().toLocaleDateString()
> "2017-5-12" #Chrome
> new Date().toLocaleDateString()
> "2017/5/12" #Edge
> new Date().toLocaleDateString()
> "2018年3月2日"
我只是想静静地处理一下日期,你却这么对我,我选择toLocaleDateString()
狗带。
于是,我就随便写下了`/${new Date().getFullYear()}/${new Date().getMonth()}${new Date().getDate()}`。OK,收工。
生命在于折腾,完成项目之后,我用正则和简单的方法写了一个小的方法作为下次在遇到时的对策:
var Format = function(date, rule) {
this.time = date ? date : (new Date());
this.rule = rule;
if (this.rule) {
this.standard()
}
}
Format.prototype.standard = function() {
let date = new Date(this.time)
if (date == 'Invalid Date') {
let reg1 = /^(\d{3,6}年)?\d{1,2}月(\d{1,2}日)?$/g,
reg2 = /^\d{1,2}月(\d{1,2}日)?(\d{1,6}年)?$/g,
reg3 = /^(\d{1,2}日)?\d{1,2}月(\d{1,6}年)?$/g,
reg4 = /^\d{3,6}年$/;
if (this.time.match(reg1)||this.time.match(reg2)||this.time.match(reg3)||this.time.match(reg4)){
let timeRule
= new Date(`${(this.time.match(/\d{3,6}年/g))?(this.time.match(/\d{3,6}年/g)[0].replace(/年/g,'')
.split('').reverse().concat([0,0,0,0,0,0]).reverse().slice(2).join(''))+'-':''}`
+`${(this.time.match(/\d{1,2}月/g))?(this.time.match(/\d{1,2}月/g)[0].replace(/月/g,''))+'-':''}`
+`${(this.time.match(/\d{1,2}日/g))?(this.time.match(/\d{1,2}日/g)[0].replace(/日/g,'')):''}`);
return timeRule == 'Invalid Date' ? '请输入正确的日期数字' : timeRule
} else {
return '请输入正确的日期,如2000年1月1日、2000-1-1或2000/1/1'
}
} else {
this.time = new Date(this.time)
return this.time
}
}
Format.prototype.change = function() {
if (!this.rule) {
return this.standard()
} else if (this.rule == 'chinese' || this.rule == 'line' || this.rule == 'slash') {
let date = new Date(this.standard()).toDateString().split(' ');
var month = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dece"];
for (var i = 0; i < month.length; i++) {
if (date[1] == month[i]) {
date[1] = i + 1
}
}
if (this.rule == 'chinese') {
return `${Number(date[3])}年${Number(date[1])}月${Number(date[2])}日`
} else if (this.rule == 'line') {
return `${Number(date[3])}-${Number(date[1])}-${Number(date[2])}`
} else {
return `${Number(date[3])}/${Number(date[1])}/${Number(date[2])}`
}
} else {
return '请输入正确的格式化参数:chinese、line或slash'
}
}
调用的方法为:
new Format('2011年10月1日').standard()
//Sat Oct 01 2011 00:00:00 GMT+0800 (中国标准时间) new Format('Sat Oct 01 2011 00:00:00 GMT+0800 (中国标准时间)', 'line').change()
//2011-11-1 new Format('Sat Oct 01 2011 00:00:00 GMT+0800','chinese').change()
//2011年11月1日 new Format('Sat Oct 01 2011 00:00:00 GMT+0800','slash’).change()
//2011/11/1 new Format('2011-11-1').change()
//Sat Nov 01 2011 00:00:00 GMT+0800 (中国标准时间)
如果您觉得我的博文有用,请不要吝啬您的赞和关注。如需转载,请标明出处,谢谢。
坑人的toLocaleDateString和简单地跳坑方式的更多相关文章
- JavaScript 跳坑指南
JavaScript 跳坑指南 坑0-String replace string的replace方法我们经常用,替换string中的某些字符,语法像这样子 string.replace(subStr/ ...
- [转帖]Kubernetes - nginx-ingress 配置跳坑指南
Kubernetes - nginx-ingress 配置跳坑指南 版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明. 本文链接:https:// ...
- CGAL代码阅读跳坑指南
CGAL代码阅读跳坑指南 整体框架介绍 CGAL中的算法和数据结构由它们使用的对象类型和操作参数化.它们可以处理满足特定语法和语义需求的任何具体模板参数.为了避免长参数列表,参数类型被收集到一个单独的 ...
- Xamarin安装和跳坑指南
安装Checklist 注意:本文只描述安装过程,由于组件的版本更新很快,为保证文章时效性,不提供下载链接,也尽可能不指明具体版本. 安装Visual Studio 2015进行默认安装,除非已经FQ ...
- 纯JSP实现简单登录跳转
1.JSP介绍 JSP即Java Server Pages,JSP技术使用Java编程语言编写类XML的tags和scriptlets,来封装产生动态网页的处理逻辑.网页还能通过tags和script ...
- 【模拟,时针分针秒针两两夹角】【没有跳坑好兴奋】hdu - 5387 (多校#8 1008)
算是最好写的一道题了吧,最近模拟没手感,一次过也是很鸡冻o(* ̄▽ ̄*)o 注意事项都在代码里,没有跳坑也不清楚坑点在哪~ #include<cstdio> #include<cst ...
- 两百条微信小程序跳坑指南(不定时更新)
微信小程序联盟出品 跳坑textarea<二百二十三>不显示文本及textarea相关问题集合跳坑<二百一十三> background-image无法获取本地资源图片....跳 ...
- 小程序红包开发跳坑记 微信小程序红包接口开发过程中遇到的问题 微信小程序红包开发
现在做小程序的越来越多,商家推广也是一个瓶颈,谁不发点红包,都很难找到人来用你的微信小程序了.于是不管你开发什么小程序功能,你或多或少都要用到小程序来发红包吧. 我们自己之前做公众号发红包,做了两三 ...
- ACM_跳坑小能手(暴力)
跳坑小能手 Time Limit: 2000/1000ms (Java/Others) Problem Description: GDUFE-GAME现场有一个游戏场地人头窜动,围观参与游戏的学生在场 ...
随机推荐
- 使用telnet发送HTTP请求
使用telnet发送HTTP请求 写这篇博客,其实没有太大的实际意义,但是还是很有必要的,如果用好Telnet指令,就可以很好的理解HTTP的一些概念,特别是http1.1的持续链接. 要想使用Tel ...
- 无废话XML--XML细节
今天开始研究xml,其实在实际的开发中,我们参与到真正的XML开发并不是很多,最多写一个配置,但是我还是觉得很有必要把XML的知识整理一遍.作为基本的2种的数据交互载体(还有一个是json),基本的X ...
- Nagios状态长时间处于Pending的解决方法
1 nagios 守护进程引起的一系列问题 1 影响nagios web页面收集监控信息 致使页面出现时而收集不到服务信息 2 影响pnp查看图形化,出图缓慢 3 影响查看服务状态信息,致使有时候查看 ...
- dubbo扩展http协议后FullGC
问题 dubbo内部定制的版本中,在处理大于10K的包的时候,会出现内存溢出的现象 原因是我们在定制dubbo http协议的时候,使用了jboss包里面的HttpRequestDecoder的htt ...
- Python CRM项目四
实现Django Admin的多对多的复选框效果 效果:左边显示的是未选中的字段,右边显示的是已选中的字段,两边点击的标签可以互相更换 首先在king_admin.py中增加filter_horizo ...
- 图说:为什么Java中的字符串被定义为不可变的
8张图,看懂Java字符串的不变性 字符串,想必大家最熟悉不过了,通常我们在代码中有几种方式可以创建字符串,比如:String s = "Hollis";这时,其实会在堆内存中创建 ...
- c#结构体、打他table、excel、csv互转
1.csv相关 public static class CsvHelper { /// <summary> /// 根据csv路径获取datatable /// </summary& ...
- Windows远程桌面卡的解决办法
Windows远程桌面卡的解决办法 如果在网络没有什么大问题的情况下,可以尝试以下操作. 1.显示中颜色选择 增强色15位 2.体验中 设置成下图的样子 然后在尝试连接试试有没有好点
- NOIP 2017 Day 0. 游记
刚从曲师大试机回来... 不巧,我抽到了和去年一样的考场,还是那么难用的XP,还是那么难用的键盘. 似乎在考场上有一股奇怪的力量,我本来在自己电脑上打板子打的没那么快,但是试机的那段时间..说出来你们 ...
- bzoj 4813: [Cqoi2017]小Q的棋盘 [树形背包dp]
4813: [Cqoi2017]小Q的棋盘 题意: 某poj弱化版?树形背包 据说还可以贪心... #include <iostream> #include <cstdio> ...