在前端页面上,很多时候我们需要用户输入时间的相关信息,比如项目的开始日期、结束日期,商品销售的开始日期、结束日期等。在做JavaScript表单验证的时候,我们需要验证结束日期不小于开始日期,这个时候就需要使用JavaScript来实现日期字符串的比较功能。
我们常用的日期字符串格式一般是2012-04-09
或2012-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日为例) | IE | FF | Chrome |
---|---|---|---|
2012-4-21 | X | 只支持格式2012-04-21 | √ |
4-21-2013 | √ | X | √ |
2012/4/21 | √ | √ | √ |
4/21/2013 | √ | √ | √ |
并非浏览器的所有版本都参与了测试,测试环境为:IE 8.0
、Firefox 20
、Chrome 22
,不排除其他浏览器版本可能存在的差异。
因此我们可以将字符串的格式转为2012/4/21
或4/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()
函数来进行日期字符串的比较。
原文:http://www.365mini.com/page/javascript-compare-date.htm
未经允许请勿转载:程序喵 » 【JavaScript】日期字符串比较 兼容IE、火狐、Chrome