Angular日期格式化求助：如何将日期显示为27 / sep / 2023？

要实现「27 / sep / 2023」的日期显示格式，可以按以下方式调整代码：

1. 调整Date管道格式符并添加大小写转换 #

将注释里的代码替换为：

{{ selectedTemplat?.modifiedAt | date:'d / LLL / yyyy' | toLowerCase }}

• d：输出不带前导零的日期（如27）
• LLL：输出本地化的月份缩写（默认首字母大写，比如Sep）
• toLowerCase()管道负责将月份缩写转为小写，得到sep
• 格式字符串里的/直接定义了分隔符的样式

2. 确保日期值有效 #

如果selectedTemplat?.modifiedAt是字符串类型，需确保Angular能将其正确解析为Date对象。若解析异常，可手动转换：

{{ selectedTemplat?.modifiedAt ? (selectedTemplat.modifiedAt | date:'d / LLL / yyyy' | toLowerCase) : '无日期' }}

也可以在组件内提前处理日期：

// 组件.ts文件
get formattedModifiedDate(): string {
  if (!this.selectedTemplat?.modifiedAt) return '无日期';
  const date = new Date(this.selectedTemplat.modifiedAt);
  return this.datePipe.transform(date, 'd / LLL / yyyy')?.toLowerCase() || '无日期';
}

模板中直接调用处理后的属性：

{{ formattedModifiedDate }}

注意：使用DatePipe需确保组件已注入该服务，或模块已导入CommonModule（Angular项目默认已配置）。

3. 全局自定义本地化（可选） #

如果需要项目全局统一使用小写月份缩写，可配置Angular本地化规则，自定义月份缩写格式。这种方式适合需要全局统一日期样式的场景。

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