使用react-native-date-picker获取时间遇格式及时区问题求助

问题根源 #

• 组件返回的是UTC时区的Date对象，所以默认输出的ISO字符串带Z后缀，和本地时区存在时间偏差
• 直接打印Date对象会自动输出ISO格式，并非纯时间字符串

修复方案 #

在onConfirm回调中，将返回的Date对象转换为本地时区的时间字符串，并按需格式化：

方案1：原生Date方法手动格式化

<DatePicker
  mode="time"
  date={date}
  modal
  open={pickupTimeModal1}
  onConfirm={(time) => {
    // 转成本地时区的时分秒格式，补零保证两位数
    const localTime = `${time.getHours().toString().padStart(2, '0')}:${time.getMinutes().toString().padStart(2, '0')}:${time.getSeconds().toString().padStart(2, '0')}`;
    console.log(localTime); // 输出示例：16:50:53（本地时间）
  }}
  onCancel={() => {
    setPickupTimeModal1(false);
  }}
/>

方案2：用toLocaleTimeString快速格式化

<DatePicker
  mode="time"
  date={date}
  modal
  open={pickupTimeModal1}
  onConfirm={(time) => {
    // 按中文环境格式化24小时制时间，可自定义显示项
    const formattedTime = time.toLocaleTimeString('zh-CN', {
      hour: '2-digit',
      minute: '2-digit',
      second: '2-digit',
      hour12: false
    });
    console.log(formattedTime); // 输出示例：16:50:53
  }}
  onCancel={() => {
    setPickupTimeModal1(false);
  }}
/>

补充提示 #

• 存储时间时建议保留原始Date对象，仅在前端展示时做格式化处理
• 若需跨时区统一，可将本地时间转成UTC格式存储，取用时再转回本地时区

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