AngularJS中如何将指定格式字符串日期转为16 April 2018格式？

嘿，我懂你遇到的麻烦了——用AngularJS自带的date过滤器处理日期字符串时完全没效果，对吧？这其实是个常见的小坑：AngularJS的date过滤器只对真正的Date对象生效，而你传入的是字符串格式的日期，所以过滤器直接原样返回了，根本没做格式化处理。

下面给你两种实用的解决方案：

方案一：在控制器里预处理，把字符串转成Date对象 #

在你拿到product数据之后，先把每个product的createdDate字符串转换成Date对象，之后再用date过滤器就正常了：

// 假设你从接口或数据源拿到了products数组
products.forEach(product => {
  // 你的日期字符串格式符合标准，直接用new Date()就能解析
  product.createdDate = new Date(product.createdDate);
});

然后在模板里使用正确的格式字符串（注意要得到16 April 2018，得用dd MMMM yyyy，而不是你之前的dd MM, yyyy）：

{{product.createdDate | date : 'dd MMMM yyyy'}}

方案二：自定义过滤器（不修改原始数据） #

如果你不想改动原始的product数据，可以自定义一个过滤器，先把字符串转成Date对象，再调用内置的date过滤器：

// 在你的AngularJS模块里注册自定义过滤器
angular.module('yourAppModule').filter('parseAndFormatDate', function($filter) {
  return function(dateString, format) {
    // 尝试把字符串转成Date对象
    const dateObj = new Date(dateString);
    
    // 检查转换是否成功（避免无效日期导致显示NaN）
    if (isNaN(dateObj.getTime())) {
      return dateString; // 转换失败就返回原字符串
    }
    
    // 用内置date过滤器格式化
    return $filter('date')(dateObj, format);
  };
});

然后在模板里这样用：

{{product.createdDate | parseAndFormatDate : 'dd MMMM yyyy'}}

小细节提醒 #

你之前用的格式字符串dd MM, yyyy会输出16 04, 2018，如果要显示英文月份全称（比如April），一定要用MMMM作为月份占位符哦。

内容的提问来源于stack exchange，提问作者Daniel Mana