当前位置: 首页 > 技术随笔 > JavaScript日期字符串比较 兼容IE、火狐、Chrome

JavaScript日期字符串比较 兼容IE、火狐、Chrome

在前端页面上,很多时候我们需要用户输入时间的相关信息,比如项目的开始日期、结束日期,商品销售的开始日期、结束日期等。在做JavaScript表单验证的时候,我们需要验证结束日期不小于开始日期,这个时候就需要使用JavaScript来实现日期字符串的比较功能。

我们常用的日期字符串格式一般是2012-04-092012-4-9。网上也有很多JavaScript实现日期字符串比较的代码,但是经过实际测试却发现兼容性非常差,有些只能够在IE浏览器上运行。

在JavaScript中,一般考虑使用Date.parse()函数来解析字符串。根据JavaScript的相关文档,可以得知Date.parse(dateVal)返回的是一个整数值,此整数表示 dateVal 中所提供的日期与 1970 年 1 月 1 日午夜之间相差的毫秒数。

不过Date.parse()并不能正确解析类似于2012-04-19的这种格式。而格式为4/19/2012的字符串则可以正常运行:

var time = Date.parse("4/19/2012");

此外,通过实际测试,我们发现IE、FF(火狐)、Chrome浏览器中Date.parse()函数支持的部分格式详情如下:

字符串格式(以2012年04月21日为例)IEFFChrome
2012-4-21X只支持格式2012-04-21
4-21-2013X
2012/4/21
4/21/2013

并非浏览器的所有版本都参与了测试,测试环境为:IE 8.0Firefox 20Chrome 22,不排除其他浏览器版本可能存在的差异。

因此我们可以将字符串的格式转为2012/4/214/21/2013等格式,再使用Date.parse()函数进行比较判断。

/**
 * 接收2012-04-09或2012-4-9格式的字符串,并返回该日期与1970年1月1日 00:00:00的毫秒差值
 * @param {String} dateStr
 * @return {Number} 
 */
function getTime(dateStr){
	dateStr = dateStr.replace("-", "/");
	return Date.parse(dateStr);
}

/**
 * 比较两个指定格式的日期字符串,并返回整数形式的比较结果。
 * 如果返回正数,则日期dateStr1较大(靠后);
 * 如果返回负数,则日期dateStr2较大;
 * 如果返回0,则两者相等。 
 * @param {String} date1
 * @param {String} date2
 * @return {Number} 
 */
function compareDate(dateStr1, dateStr2){
	return getTime(dateStr1) - getTime(dateStr2);
}

复制以上代码到需要使用的地方,在直接调用compareDate()函数即可。

由于JavaScript文档要求Date.parse()接收的参数最好符合月/日/年的格式。因此getTime()函数最好可以如下编写:

/**
 * 传入yyyy-M(MM)-d(dd)格式的字符串,返回相对于1970-1-1 00:00:00 000的毫秒数差值
 * @param {String} dateStr
 * @return {Number} 
 */
function getTime(dateStr){
	var dateStr = dateStr.replace(/^(\d{4})-(\d{1,2})-(\d{1,2})$/, "$2/$3/$1");
	return Date.parse(dateStr);
}

注意,由于大部分前端页面中已经有JavaScript日历控件来负责设置日期,因此上述函数代码内部并未对传入的日期格式进行验证。如果需要验证,请自行酌情修改。

强烈注意,经过更多测试发现,年/月/日格式的字符串在部分浏览器的部分版本中无法使用Date.parse()进行正确解析,请使用本文末尾的getTime()函数来进行日期字符串的比较。(标记于2013-07-22)

8 1
我们认为: 用户的主要目的,是为了获取有用的信息,而不是来点击广告的。因此本站将竭力做好内容,并将广告和内容进行分离,确保所有广告不会影响到用户的正常阅读体验。用户仅凭个人意愿和兴趣爱好点击广告。
我们坚信:只有给用户带来价值,用户才会给我们以回报。
CodePlayer技术交流群1CodePlayer技术交流群1

帮朋友打一个硬广告:

P2P网贷系统(Java版本) 新年低价大促销,多年P2P技术积累,系统功能完善(可按需定制,可支持第三方存管、银行存管),架构稳定灵活、性能优异、二次开发快速简单。 另可提供二次开发、安装部署、售后维护、安全培训等一条龙服务。

外行看热闹,内行看门道。可以自信地认为,在系统设计上,比市面上的晓风、迪蒙、方维、绿麻雀、国融信、金和盛等P2P系统要好。
深圳地区支持自带技术人员现场考察源代码、了解主要技术架构,货比三家,再决定是否购买。

也可推荐他人购买,一旦完全成交,推荐人可获得实际售价 10% 的返现。
有意向者,详情请 点击这里 联系,工作时间立即回复。