iview中datetimerange类型的日期选择器时间少了8小时解决方案以及如何正确使用datetimerange的代码示例

iview 日期时间选择器少8小时，本质是 UTC 时间与本地时区（东八区）转换问题，核心解决思路是关闭 UTC 转换。

1、直接关闭 UTC 转换
给  DatePicker  组件添加  :use-utc="false"  属性，强制使用本地时区，无需额外处理时间。

<template>
  <div style="padding: 20px;">
    <!-- 日期时间范围选择器：添加 :use-utc="false" 解决8小时差 -->
    <DatePicker
      type="datetimerange"
      placeholder="选择开始和结束时间"
      format="yyyy-MM-dd HH:mm"  <!-- 显示格式：年-月-日 时:分 -->
      calendar-format="yyyy-MM-dd HH:mm"  <!-- 弹出层日历的显示格式 -->
      :use-utc="false"  <!-- 核心：关闭UTC转换，时间与本地一致 -->
      v-model="dateRange"
      @on-change="handleDateChange"  <!-- 选择后触发的事件 -->
    ></DatePicker>

    <!-- 展示选择的结果（验证时间是否正确） -->
    <div style="margin-top: 20px;">
      已选时间范围：{{ dateRange[0] }} 至 {{ dateRange[1] }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dateRange: []  // 绑定日期时间范围，格式为 [开始时间, 结束时间]
    };
  },
  methods: {
    handleDateChange(val) {
      // val 为选择的时间范围数组，此时时间已自动校正为本地时间（无8小时差）
      console.log("校正后的时间范围：", val); 
      “// 输出示例：["2024-05-20 14:30", "2024-05-20 16:45"]（与本地时间一致）
    }
  }
};
</script>

2、示例2：手动转换方案（保留UTC场景）
 
若业务必须使用UTC时间（如接口要求），可在获取组件值后，手动给起始/结束时间加8小时，转为本地时间。

<template>
  <div style="padding: 20px;">
    <!-- 日期时间范围选择器：不关闭UTC，后续手动处理 -->
    <DatePicker
      type="datetimerange"
      placeholder="选择开始和结束时间"
      format="yyyy-MM-dd HH:mm"
      calendar-format="yyyy-MM-dd HH:mm"
      v-model="utcDateRange"  <!-- 绑定的是UTC时间 -->
      @on-change="handleUtcDateChange"
    ></DatePicker>

    <!-- 展示校正后的本地时间 -->
    <div style="margin-top: 20px;">
      校正后本地时间范围：{{ localDateRange[0] }} 至 {{ localDateRange[1] }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      utcDateRange: [],    // 组件返回的UTC时间范围
      localDateRange: []   // 手动校正后的本地时间范围
    };
  },
  methods: {
    handleUtcDateChange(utcVal) {
      // utcVal 是UTC时间数组，示例：["2024-05-20 06:30", "2024-05-20 08:45"]（比本地少8小时）
      this.utcDateRange = utcVal;
      
      // 手动加8小时，转为本地时间
      this.localDateRange = utcVal.map(utcTime => {
        const localDate = new Date(utcTime);
        localDate.setHours(localDate.getHours() + 8); // 核心：加东八区时差
        // 格式化时间为 "yyyy-MM-dd HH:mm"（避免显示毫秒等多余信息）
        return `${localDate.getFullYear()}-${String(localDate.getMonth() + 1).padStart(2, '0')}-${String(localDate.getDate()).padStart(2, '0')} ${String(localDate.getHours()).padStart(2, '0')}:${String(localDate.getMinutes()).padStart(2, '0')}`;
      });

      console.log("校正后的本地时间：", this.localDateRange); 
      // 输出示例：["2024-05-20 14:30", "2024-05-20 16:45"]（时间正确）
    }
  }
};
</script>