Vue.js中如何合并日期选择器与时间选择器值为ISO格式时间？

这个需求其实很常见，核心就是把日期对象的年月日和时间对象的时分秒毫秒提取出来，重新组合成一个新的Date实例，再转成ISO格式字符串就行。这里要注意时区问题，因为你的原始日期都是UTC格式（带Z后缀），所以要用UTC相关的方法来提取时间分量，避免本地时区干扰。

具体实现步骤 #

假设你从组件拿到的date和time都是Date对象（如果是字符串的话，先通过new Date(dateStr)转成Date实例）：

1. 提取日期和时间的各个分量
   从日期对象里拿UTC的年、月、日，从时间对象里拿UTC的时、分、秒、毫秒。
2. 创建新的合并Date对象
   用提取到的分量初始化一个新的Date实例。
3. 转成ISO字符串
   调用toISOString()方法得到目标格式。

代码示例 #

基础版本

// 从date picker获取的Date对象
const selectedDate = new Date("2018-01-19T00:00:00.000Z");
// 从time picker获取的Date对象
const selectedTime = new Date("2018-05-20T00:06:30.000Z");

// 合并日期时间
const mergedDatetime = new Date(
  selectedDate.getUTCFullYear(),
  selectedDate.getUTCMonth(),
  selectedDate.getUTCDate(),
  selectedTime.getUTCHours(),
  selectedTime.getUTCMinutes(),
  selectedTime.getUTCSeconds(),
  selectedTime.getUTCMilliseconds()
);

// 生成ISO字符串
const targetIsoString = mergedDatetime.toISOString();
console.log(targetIsoString); // 输出: "2018-01-19T00:06:30.000Z"

Vue组件内封装方法

如果是在Vue组件里使用，可以把逻辑封装成一个方法：

<template>
  <div>
    <!-- 假设你的日期选择器和时间选择器组件 -->
    <el-date-picker v-model="selectedDate" type="date" value-format="yyyy-MM-dd'T'HH:mm:ss.SSS'Z'" />
    <el-time-picker v-model="selectedTime" value-format="yyyy-MM-dd'T'HH:mm:ss.SSS'Z'" />
    <button @click="handleMerge">合并并生成ISO字符串</button>
    <p>结果: {{ mergedIsoString }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedDate: new Date("2018-01-19T00:00:00.000Z"),
      selectedTime: new Date("2018-05-20T00:06:30.000Z"),
      mergedIsoString: ""
    };
  },
  methods: {
    handleMerge() {
      const date = this.selectedDate;
      const time = this.selectedTime;

      // 确保是Date对象，如果组件返回的是字符串，先转换
      const dateObj = date instanceof Date ? date : new Date(date);
      const timeObj = time instanceof Date ? time : new Date(time);

      const merged = new Date(
        dateObj.getUTCFullYear(),
        dateObj.getUTCMonth(),
        dateObj.getUTCDate(),
        timeObj.getUTCHours(),
        timeObj.getUTCMinutes(),
        timeObj.getUTCSeconds(),
        timeObj.getUTCMilliseconds()
      );

      this.mergedIsoString = merged.toISOString();
    }
  }
};
</script>

关键注意点 #

• 为什么用getUTC*方法？因为你的原始日期都是UTC时间（带Z），如果用getFullYear()这类本地时区方法，会因为用户所在时区的偏移导致日期错误，比如东八区的用户，new Date("2018-01-19T00:00:00.000Z")的本地日期是1月19日8点，用getDate()拿到的是19，但如果是其他时区可能拿到18，而getUTCDate()始终拿到19，符合你的需求。
• 如果你的日期选择器返回的是字符串，一定要先转成Date实例再处理，否则无法调用getUTC*方法。

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