Bug: Drawer中的DatePicker回显崩溃

[bo-Chou]

Version

Vben Admin V5

Describe the bug?

Reproduction

日期格式是'YYYY-MM-DD HH:mm:ss'

System Info

System:
    OS: Windows 11 10.0.26100
    CPU: (20) x64 13th Gen Intel(R) Core(TM) i9-13900H
    Memory: 6.20 GB / 31.66 GB
  Binaries:
    Node: 20.17.0 - D:\Software\nodejs\node.EXE
    npm: 10.8.3 - D:\Software\nodejs\npm.CMD
    pnpm: 9.15.2 - ~\AppData\Local\pnpm\pnpm.CMD
  Browsers:
    Edge: Chromium (127.0.2651.74)
    Internet Explorer: 11.0.26100.1882

Relevant log output

No response

Validations

• Read the docs
• Ensure the code is up to date. (Some issues have been fixed in the latest version)
• I have searched the existing issues and checked that my issue does not duplicate any existing issues.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[mynetfan]

是不是自己对项目做了修改？比如移除了国际化相关的代码？
提Issue务必给一些可复现问题的代码

[bo-Chou]

以下是index.vue
`

<script setup lang="ts"> import { useVbenDrawer } from '@vben/common-ui'; import { $t } from '@vben/locales'; import { Button } from 'ant-design-vue'; import UserDataDrawer from './user-drawer.vue'; const [UserDrawer, userDrawerApi] = useVbenDrawer({ connectedComponent: UserDataDrawer, }); function handleEdit() { // 模拟数据 后端返回 const row = { date: '2025-01-17 00:00:00' }; userDrawerApi.setData({ values: row }); userDrawerApi.open(); } </script> {{ $t('common.edit') }} `

以下是Drawer
`

<script lang="ts" setup> import { useVbenDrawer } from '@vben/common-ui'; import { $t } from '@vben/locales'; import { message } from 'ant-design-vue'; import { useVbenForm } from '#/adapter/form'; defineOptions({ name: 'UserDrawer', }); const [Form, formApi] = useVbenForm({ handleSubmit, schema: [ { component: 'DatePicker', fieldName: 'date', label: 'Date', }, ], showDefaultActions: false, }); const [Drawer, drawerApi] = useVbenDrawer({ onCancel() { drawerApi.close(); }, onConfirm: async () => { const { valid } = await formApi.validate(); if (valid) { await formApi.submitForm(); drawerApi.close(); message.success($t('common.success')); } }, onOpenChange(isOpen: boolean) { if (isOpen) { const { values } = drawerApi.getData>(); if (values) { formApi.setValues(values); } } }, title: $t('human.user.title'), }); async function handleSubmit(values: Record) { console.log(values); } </script> `

[mynetfan]

一般情况下只解决当前版本的问题

[bo-Chou]

一般情况下只解决当前版本的问题

这个就是最新版的，我用playground给你demo

baseDrawerApi.setData({ values: { date: '2025-01-17 00:00:00' } });
`import { useVbenForm } from '#/adapter/form';

const [Form, formApi] = useVbenForm({
schema: [{ component: 'DatePicker', fieldName: 'date', label: 'Date' }],
showDefaultActions: false,
});
onOpenChange(isOpen: boolean) {
if (isOpen) {
const { values } = drawerApi.getData<Record<string, any>>();
if (values) {
formApi.setValues(values);
}
}
},`

[mynetfan]

请查看Antd的文档。日期时间类型的组件，值的默认类型为dayjs。
如果要使用字符串类型的值，需要传入valueFormat指定值格式。