dayjs.tz.setDefault('xxxx') does not work in datepicker series components

[guoqiang998]

• I have searched the issues of this repository and believe that this is not a duplicate.

https://codesandbox.io/s/-ant-design-vue-3-2-6-forked-rx3bdh?file=/src/demo.vue

What problem does this feature solve?

node_modules/ant-design-vue/es/vc-picker/generate/dayjs.js --> generateConfig function：

Now: 'dayjs' and 'moment' handle the default timezone differently, the default timezone will not work without dayjs().tz().
Expected: Like moment, it takes effect directly after setting the default time zone.

What does the proposed API look like?

ant-design-vue：3.2.6
vue：^3.2.33
os：Windows 11 专业版 21H2

[tangjinzhou]

这你要给dayjs 提issue 吧

[guoqiang998]

@tangjinzhou dayjs早有人提过issue，感觉希望不大，antd既然使用dayjs，就应该兼顾其用法，不能因为用法不同就有功能缺失吧。

iamkun/dayjs#1227
iamkun/dayjs#1809

[guoqiang998]

@tangjinzhou 问题是对于dayjs来说，只能说使用方式比较奇怪，并不能说这是个bug，他可以改也完全有理由不改。现在antd时间组件问题是，没有.tz()相关处理就没办法支持默认时区，本地自己通过事件实现时区需求不是不可以，但组件内置的一些动作就比较麻烦了，例如点击today按钮，now按钮，点击time选项之类的，会多处理很多繁杂的逻辑而且容易有遗漏，还有一些动作antd并没有提供事件，所以还是希望antd能够解决这个问题，并关注一下dayjs此问题的动向。

[tangjinzhou]

你可以 alias 这个文件 到本地文件，并修改相关代码即可，不用去改组件的复杂逻辑

[guoqiang998]

@tangjinzhou 你有试过吗？我是不是还要每个方法都研究一下是否应该加.tz() ？

比如，我用的是 dayjs.tz.setDefault('Asia/Tokyo'); // 比本地时区多一小时

step-1：format方法 加.tz()后input显示正确了，点击now按钮也正确了，但panel中对应的时间显示不对
step-2：将getYear等获取时间相关方法加上.tz()后，panel里的时间也显示正确了，但是点击now后又不对了（多了两个小时），还有点击改变panel中小时后再点击确定按钮，时间也自动多加了一个小时

总之，感觉不把时间组件源码看一遍研究透，没办法只通过修改这个文件就能达到目的。
此问题antd官方修正是最好的办法，或者至少官网给出相关说明和解决方案。

[machao7]

建议可以传递dayjs方法或者全局provide("dayjs", dayjs.tz.bind(dayjs))
只要组件库识别注入的 dayjs 就可以轻松解决这个时区问题

[machao7]

或者默认就直接使用 dayjs.tz 作为组件库的内置方法，这样外部修改 时区 对于组件库来说就没有任何侵入性，也不需要额外增加任何接口或者方法。
开销就是默认加载 dayjs 时区相关的两个插件而已

[machao7]

还不能直接用 dayjs.tz 替换 dayjs，这俩的api并不完全等价！ 比如自定义模板格式化
dayjs(string, format)
但是 dayjs.tz 的api必须有第三个参数才可以，否则报错
dayjs.tz(string, format, timezone)
悲催的是，dayjs.tz 并没有办法获知当前设置的 defaultTimeZone 是啥，只能 setDefault...

[machao7]

有一个扩展建议，使用方法类似：

<template>
<a-config-provider :date-provider="customProvider">
</a-config-provider>
</template>

<script>
import dayjs from "dayjs"
import { DayjsProvider,  MomentProvider, DateFnsProvider } from "and-design-vue/dateProviders"

export default {
    setup() {
        return {
              customProvider: DayjsProvider.extend({
                      getNow() {
                           return dayjs.tz()
                      },
                      format(locale, date, format) {
                           return dayjs.tz(date, format, myDefaultTimeZone)
                      }
               })
        }
    }
}
</script>

[machao7]

#5858 (comment)

[machao7]

你可以 alias 这个文件 到本地文件，并修改相关代码即可，不用去改组件的复杂逻辑

各种修改和折腾，在这个问题上，浪费太多时间了。准备弃坑了。

[silvia-YQY]

请问你后来怎么解决了？

[machao]

请问你后来怎么解决了？

继续用 v2. 时区问题直接影响了基本功能和显示问题，v3 目前没有简易的方法可以处理这个问题

[guoqiang998]

请问你后来怎么解决了？

只能把组件包裹一层，然后通过组件内value来达到显示正确，然后有修改动作后，再把值改成本地时区然后emit出去

组件内value：外层传值转化成想要的时区
emit出去的值：改成本地时区再emit

目前只能通过这个办法完美解决。

[github-actions]

This issue is stale because it has been open 60 days with no activity. Remove stale label or comment or this will be closed in 7 days

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.