Angular中如何截取GET响应日期字段，仅展示日期部分？

嘿，这个需求太常见了！根据你使用的技术栈不同，有好几种靠谱的实现方式，我给你列几个常用场景的解决方案：

1. 前端原生JavaScript处理 #

如果是在浏览器端直接处理字符串，有两种思路：

• 简单分割法：适合确定格式固定为YYYY-MM-DDTHH:mm:ss的情况，直接按T分割取前半部分：

const originalDate = "0001-01-01T00:00:00";
const formattedDate = originalDate.split('T')[0];
console.log(formattedDate); // 输出 "0001-01-01"

• Date对象处理法：更健壮，能兼容一些格式小变动的情况，还能支持本地化展示：

const dateObj = new Date("0001-01-01T00:00:00");
// 直接转ISO字符串后分割
const formattedDate = dateObj.toISOString().split('T')[0];
// 或者用Intl做本地化（比如中文格式）
const localizedDate = new Intl.DateTimeFormat('zh-CN', { 
  year: 'numeric', 
  month: '2-digit', 
  day: '2-digit' 
}).format(dateObj);

2. 后端C#处理（.NET场景） #

如果你的数据来自.NET后端，0001-01-01通常是DateTime的默认最小值，可以在后端处理后再返回前端，或者在视图层直接格式化：

• 后端代码处理：

DateTime deletionDate = DateTime.Parse("0001-01-01T00:00:00");
string formattedDate = deletionDate.ToString("yyyy-MM-dd");

• Razor视图中直接展示：

@Model.DeletionDate.ToString("yyyy-MM-dd")

3. Vue框架中处理 #

可以用过滤器或者计算属性来统一处理日期格式：

• 过滤器方式：适合全局复用

<template>
  <div>{{ deletionDate | formatShortDate }}</div>
</template>

<script>
export default {
  filters: {
    formatShortDate(dateStr) {
      return dateStr ? dateStr.split('T')[0] : '';
    }
  },
  data() {
    return {
      deletionDate: "0001-01-01T00:00:00"
    };
  }
};
</script>

• 计算属性方式：适合单个组件内的个性化处理

<script>
export default {
  data() {
    return {
      deletionDate: "0001-01-01T00:00:00"
    };
  },
  computed: {
    formattedDeletionDate() {
      return this.deletionDate ? this.deletionDate.split('T')[0] : '';
    }
  }
};
</script>

<template>
  <div>{{ formattedDeletionDate }}</div>
</template>

4. React框架中处理 #

可以写个工具函数，或者用成熟的日期库（推荐date-fns，比moment更轻量）：

• 原生工具函数：

const formatShortDate = (dateStr) => {
  return dateStr ? dateStr.split('T')[0] : '';
};

function MyComponent() {
  const deletionDate = "0001-01-01T00:00:00";
  return <div>{formatShortDate(deletionDate)}</div>;
}

• 使用date-fns库：

import { format } from 'date-fns';

function MyComponent() {
  const deletionDate = "0001-01-01T00:00:00";
  return <div>{format(new Date(deletionDate), 'yyyy-MM-dd')}</div>;
}

如果你的技术栈不在上面的列表里，随时说出来，我再给你针对性的方案~

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