【JavaScript】日期字符串比较兼容IE、火狐、Chrome-前端设计-优客志

在前端页面上，很多时候我们需要用户输入时间的相关信息，比如项目的开始日期、结束日期，商品销售的开始日期、结束日期等。在做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);

  
  
  
  
  }