AngularJS中如何让new Date()仅显示年份或年月？附代码示例

嘿，这事儿超简单的！AngularJS自带的date过滤器本身就支持自定义格式，你只需要修改过滤器的格式参数，就能轻松实现仅显示年份或者年月的效果。

1. 仅显示年份 #

如果你只想展示4位年份，把原来的date:'longDate'改成date:'yyyy'就可以了。yyyy是AngularJS date过滤器里代表4位年份的占位符，会把你的日期转换成类似2008这样的格式。

修改后的日期单元格代码：

<td class="date-table-td">{{article.date | date:'yyyy'}}</td>

2. 显示年月 #

如果需要显示年份+月份，有几种常用格式可选：

• 数字格式（比如2008-05）：用date:'yyyy-MM'，其中MM代表两位数字的月份（1-12会显示为01-12）
• 带月份名称的格式（比如May 2008）：用date:'MMMM yyyy'，MMMM会显示完整的月份英文名称（要是需要中文月份，确保你的AngularJS加载了对应的本地化语言包就行）

对应的代码示例：

数字年月格式 #

<td class="date-table-td">{{article.date | date:'yyyy-MM'}}</td>

带月份名称的年月格式 #

<td class="date-table-td">{{article.date | date:'MMMM yyyy'}}</td>

完整修改后的代码片段 #

给你贴一下调整后的tbody部分代码，方便直接参考：

<tbody>
  <tr ng-repeat="article in articles | orderBy:sortType:sortReverse | filter:searchArticle ">
    <td>{{article.source}}</td>
    <td><a href="{{article.link}}" target="_blank" rel="noopener noreferrer">{{article.title}}</a></td>
    <!-- 这里换成你需要的格式，比如仅年份 -->
    <td class="date-table-td">{{article.date | date:'yyyy'}}</td>
  </tr>
</tbody>

要是你还需要其他日期格式，可以去查AngularJS官方的date过滤器文档，里面有所有可用的占位符说明哦～

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