【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日为例) IE FF Chrome
2012-4-21 X 只支持格式2012-04-21
4-21-2013 X
2012/4/21
4/21/2013

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

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

 
 
 
 
 
  1. /**

  2.  * 接收2012-04-09或2012-4-9格式的字符串,并返回该日期与1970年1月1日 00:00:00的毫秒差值

  3.  * @param {String} dateStr

  4.  * @return {Number}

  5.  */

  6. function getTime(dateStr){

  7.     dateStr = dateStr.replace("-", "/");

  8.     return Date.parse(dateStr);

  9. }


  10. /**

  11.  * 比较两个指定格式的日期字符串,并返回整数形式的比较结果。

  12.  * 如果返回正数,则日期dateStr1较大(靠后);

  13.  * 如果返回负数,则日期dateStr2较大;

  14.  * 如果返回0,则两者相等。

  15.  * @param {String} date1

  16.  * @param {String} date2

  17.  * @return {Number}

  18.  */

  19. function compareDate(dateStr1, dateStr2){

  20.     return getTime(dateStr1) - getTime(dateStr2);

  21. }

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

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

 
 
 
 
 
  1. /**

  2.  * 传入yyyy-M(MM)-d(dd)格式的字符串,返回相对于1970-1-1 00:00:00 000的毫秒数差值

  3.  * @param {String} dateStr

  4.  * @return {Number}

  5.  */

  6. function getTime(dateStr){

  7.     var dateStr = dateStr.replace(/^(\d{4})-(\d{1,2})-(\d{1,2})$/, "$2/$3/$1");

  8.     return Date.parse(dateStr);

  9. }

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

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

原文:http://www.365mini.com/page/javascript-compare-date.htm

赞(52) 打赏
未经允许不得转载:优客志 » 前端设计
分享到:

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏