vueComponent / ant-design-vue

🌈 An enterprise-class UI components based on Ant Design and Vue. 🐜
https://antdv.com/
Other
20.33k stars 3.8k forks source link

[BUG] datepicker 传入带时区的dayjs对象时, 显示错误 #7357

Closed gaokun closed 9 months ago

gaokun commented 9 months ago

Version

3.2.20

Environment

macos, Chrome, vue3

Reproduction link

https://github.com/gaokun/antdv-datepicker

Steps to reproduce

详见: https://github.com/gaokun/antdv-datepicker

What is expected?

显示成8点

What is actually happening?

显示为0点

Additional Info

示例从西一区, UTC, 到东一区, 时间应该依次相差1小时, 但UTC时区的显示错误

image

但是popup中的time picker有一部分显示的是正确的
image

Code

<template>
  <p>本示例展示了ant design vue datepicker在 <b>UTC时区</b> 时显示的异常</p>
  <p>注意: date-picker的value都为带时区的dayjs对象</p>
  <ul>
    <li>
      <span>西一区</span>
      <a-date-picker
        v-model:value="west1DateValue"
        show-time
        placeholder="Select Time"
      />
    </li>
    <li>
      <span>UTC</span>
      <a-date-picker
        v-model:value="utcDateValue"
        show-time
        placeholder="Select Time"
      />
      <span style="color: red; font-weight: bold"
        >应该显示为8点, 实际显示0点</span
      >
    </li>

    <li>
      <span>东一区</span>
      <a-date-picker
        v-model:value="east1DateValue"
        show-time
        placeholder="Select Time"
      />
    </li>
  </ul>
</template>
<script setup>
import { ref } from "vue";
import dayjs from "dayjs";
import utc from "dayjs/plugin/utc";
import timezone from "dayjs/plugin/timezone";

dayjs.extend(utc);
dayjs.extend(timezone);

const time = 1708243200000;

const utcDateValue = ref(dayjs(time).tz("Etc/GMT"));
const east1DateValue = ref(dayjs(time).tz("Etc/GMT-1"));
const west1DateValue = ref(dayjs(time).tz("Etc/GMT+1"));
</script>

<style scoped>
ul {
  li {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 70px 300px 1fr;
  }
}
</style>
gaokun commented 9 months ago

Sorry, 是dayjs的bug

date.locale('en').format('YYYY-MM-DD HH:mm:ss') 在 utc 时区有问题

duoluodexiaoxiaoyuan commented 7 months ago

Sorry, 是dayjs的bug

date.locale('en').format('YYYY-MM-DD HH:mm:ss') 在 utc 时区有问题

date.locale is not a function TypeError: date.locale is not a function at Object.format (webpack-internal:///./node_modules/ant-design-vue/es/vc-picker/generate/dayjs.js:262:19) at formatValue (webpack-internal:///./node_modules/ant-design-vue/es/vc-picker/utils/dateUtil.js:124:79) at eval (webpack-internal:///./node_modules/ant-design-vue/es/vc-picker/hooks/useValueTexts.js:29:83) at useMemo (webpack-internal:///./node_modules/ant-design-vue/es/_util/hooks/useMemo.js:8:59) at useValueTexts (webpack-internal:///./node_modules/ant-design-vue/es/vc-

我用的也是3.2.20这个版本重新会显报错了