uni-app u-datetime-picker选择1970年4月13日日期以及1970年以前的日期回显错误

uni-app u-datetime-picker选择1970年4月13日日期以及1970年以前的日期回显错误

操作步骤：

<u-datetime-picker ref="datetimePicker" :show="dateShow" v-model="value" mode="date" @cancel="dateShow=false"  
formatter="formatter" :minDate="minDate" :maxDate="value1" @confirm="pickerBirthday"></u-datetime-picker>
pickerBirthday(e) {
    console.log(e,'++++++++22222222')
    const date = moment.utc(e.value * 1000).toDate();
    this.data.birthday = moment(date).format('YYYY-MM-DD');
    // console.log(this.data.birthday);
    this.dateShow = false
}

预期结果：

希望显示正确的年月日


### 实际结果：

显示错误

bug描述：

选择时间插件，选择1970 年4月13 日 回显的数据是2248-05-10


| 开发环境       | 版本号 | 项目创建方式 |
|----------------|--------|--------------|
| Mac            |        | HBuilderX    |
| Intel Core i5  | 4.14   |              |
| Android        | 14     |              |
| 华为           |        |              |
| HONOR V30 Pro  |        |              |
| vue            | vue2   |              |
| 云端           |        |              |

更多关于uni-app u-datetime-picker选择1970年4月13日日期以及1970年以前的日期回显错误的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app u-datetime-picker选择1970年4月13日日期以及1970年以前的日期回显错误的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 uni-app 中使用 u-datetime-picker 组件时，如果选择 1970 年 4 月 13 日或 1970 年以前的日期，回显错误可能是由于以下原因：

1. 时间戳问题

  • 1970 年 1 月 1 日是 Unix 时间戳的起始点（即 1970-01-01 00:00:00 UTC），时间戳为 0。
  • 如果你选择的日期是 1970 年以前的日期，时间戳会是负数，而某些组件或库可能不支持处理负数的时间戳，导致回显错误。

2. u-datetime-picker 的默认范围

  • u-datetime-picker 组件可能默认设置了日期范围，可能未支持 1970 年以前的日期。

解决方案

1. 检查并设置日期范围

  • 在使用 u-datetime-picker 时，明确设置 start 和 end 属性，确保范围包括 1970 年以前的日期。
  • 例如：
    <u-datetime-picker
  :start="new Date('1900-01-01').getTime()"
  :end="new Date('2100-01-01').getTime()"
  v-model="selectedDate"
/>

2. 处理时间戳

  • 如果时间戳是负数，确保你的代码能够正确处理负数时间戳。
  • 例如，在 JavaScript 中：
    const date = new Date(selectedDate);
console.log(date.toISOString()); // 确保日期格式正确

3. 更新组件版本

  • 确保你使用的是最新版本的 uView 或 uni-app 组件库，旧版本可能存在对日期处理的 bug。
  • 更新方法：
    npm update uview-ui

4. 自定义日期格式化

  • 如果默认的日期格式化有问题，可以自定义日期格式化逻辑。
  • 例如：
    const formatDate = (timestamp) => {
  const date = new Date(timestamp);
  return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
};

5. 检查组件源码

  • 如果问题依然存在，可以查看 u-datetime-picker 的源码，确认其对日期范围和时间戳的处理逻辑。

示例代码

以下是一个完整的示例，确保支持 1970 年以前的日期：

<template>
  <view>
    <u-datetime-picker
      :start="new Date('1900-01-01').getTime()"
      :end="new Date('2100-01-01').getTime()"
      v-model="selectedDate"
      @confirm="onConfirm"
    />
    <text>Selected Date: {{ formattedDate }}</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      selectedDate: null,
      formattedDate: '',
    };
  },
  methods: {
    onConfirm(value) {
      this.selectedDate = value;
      this.formattedDate = this.formatDate(value);
    },
    formatDate(timestamp) {
      const date = new Date(timestamp);
      return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
    },
  },
};
</script>
回到顶部