uni-app 中picker mode=date 控件在不同时区下的回调值异常

uni-app 中picker mode=date 控件在不同时区下的回调值异常

开发环境 版本号 项目创建方式
Windows win11 HBuilderX

产品分类：uniapp/App

PC开发环境操作系统：Windows

HBuilderX类型：正式

HBuilderX版本号：4.57

手机系统：Android

手机系统版本号：Android 12

手机机型：CT48

页面类型：vue

vue版本：vue3

打包方式：离线

示例代码：

<template>  
  <picker  
        mode="date"  
        :value="sendDateRender"  
        :start="minDate"  
        :end="maxDate"  
        @change="deliveryConfirm">  
        <view class="picker">{{ sendDateRender }}</view>  
      </picker>  
</template>  

<script setup lang="ts">  

const sendDateRender = ref<string>(moment().format('YYYY-MM-DD'));  

const deliveryConfirm = (e: any) => {   
  sendDateRender.value =e.detail.value  

};  
</script>

bug描述：

当我把安卓系统时区切换到洛杉矶时区时， 使用picker mode=date 选择任意日期，e.detail.value 回调日期总是比选择的日期少一天！！


更多关于uni-app 中picker mode=date 控件在不同时区下的回调值异常的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

美国时间比国内日期要晚，合理的做法是打印和存储时间戳，保证不同地区展示的绝对时间一样。你使用 Monment 时候也需要设置时区

更多关于uni-app 中picker mode=date 控件在不同时区下的回调值异常的实战教程也可以访问 https://www.itying.com/category-93-b0.html


具体设置方法，你搜一下 “moment js 格式化日期时候如何设置时区？”

不要被我这个sendDateRender 的初始值误导了，哪怕我随便写个任意日期的string也不应该影响后续选择，问题重点在于，我在 picker 弹窗内选择的任意日期change回调后， e.detail.value 都会少一天，

回复 西邮: 复现了此问题，接下来会进行修复

这是一个已知的时区处理问题。uni-app的date picker组件在Android平台下会受系统时区影响，导致回调值出现偏差。

问题原因：

  1. picker组件内部使用了系统时区处理日期
  2. 回调时未正确转换为本地时区显示

解决方案：

  1. 直接使用时区处理库修正：
const deliveryConfirm = (e: any) => {
  // 将picker返回的日期视为UTC时间，再转换为本地时间
  const utcDate = new Date(e.detail.value + 'T00:00:00Z');
  sendDateRender.value = moment(utcDate).format('YYYY-MM-DD');
};
  1. 或者使用Date对象处理：
const deliveryConfirm = (e: any) => {
  const date = new Date(e.detail.value);
  const offset = date.getTimezoneOffset() * 60000;
  const localDate = new Date(date.getTime() - offset);
  sendDateRender.value = localDate.toISOString().split('T')[0];
};
回到顶部