如何截断日期中的时间部分并传递给组件？解决日期解析报错问题

报错原因 #

后端预期接收YYYY-MM-DD格式的纯日期字符串，但编辑时组件传递的是带时区的完整ISO时间（如2023-04-29T22:00:00.000Z），后端解析器在索引10的位置（T字符处）遇到未预期内容，触发解析错误。

几种截断时间的实现方式 #

1. 直接字符串截断（最简单高效）

利用ISO时间字符串的固定格式，直接截取前10位字符即可得到纯日期部分：

const fullDateTime = '2023-04-29T22:00:00.000Z';
const dateOnly = fullDateTime.slice(0, 10); // 结果：'2023-04-29'

2. 借助Date对象处理（更健壮，兼容异常格式）

如果担心输入格式可能有偏差，用Date对象转换后再提取日期：

const fullDateTime = '2023-04-29T22:00:00.000Z';
const dateObj = new Date(fullDateTime);
// 方式一：转ISO字符串后截断
const dateOnly = dateObj.toISOString().slice(0, 10);
// 方式二：用国际化格式化确保输出YYYY-MM-DD
const dateOnly = new Intl.DateTimeFormat('en-CA').format(dateObj);

3. 组件层面配置（从源头避免带时间的输出）

如果你使用的是UI组件库（如Element UI、Ant Design等）的日期选择器，直接将组件的type属性设置为date，组件会自动返回纯日期字符串，无需手动处理：

<!-- Element UI 示例 -->
<el-date-picker
  v-model="form.date"
  type="date"
  placeholder="选择日期"
></el-date-picker>

额外建议 #

如果后端允许，也可以修改后端解析逻辑，兼容带时间的ISO格式字符串，这样前端无需额外处理。但如果后端必须严格要求纯日期，上述前端处理方式即可解决问题。

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