VueJs中Ant Design DatePicker日期格式修改问题

方案一：使用DatePicker的value-format属性（推荐） #

Ant Design Vue的a-date-picker提供了value-format属性，可直接指定绑定值的格式，无需手动转换。只需给组件添加该属性，设置为你需要的DD-MM-YYYY格式即可：

<template>
    <a-form :model="state" name="basic" autocomplete="off">
         <a-form-item label="Ten cong viec" name="nameJob">
                 <a-input v-model:value="state.nameJob" />
         </a-form-item>
         <a-form-item label="Date" name="date">
                 <!-- 添加value-format属性指定绑定值格式 -->
                 <a-date-picker v-model:value="state.date" :format="dateFormatList" value-format="DD-MM-YYYY" />
         </a-form-item>
         <a-form-item>
                 <a-button type="primary" html-type="submit" style="margin-left: 10px" @click="handleCreateJob">Submit</a-button>
    </a-form>
</template>
<script setup>
import {reactive} from 'vue';
const dateFormatList = ['DD/MM/YYYY'];
const state = reactive({
    nameJob: '',
    date: ""
});

const handleCreateJob = async () => {
    try {
        // 此时state.date已经是DD-MM-YYYY格式的字符串，直接提交即可
        await createJob({ nameJob: state.nameJob, date: state.date })
    } catch (e) {
        // 可在此添加错误处理逻辑
    }
};
</script>

方案二：提交时手动格式化日期 #

如果不想修改组件属性，也可以在提交函数中使用dayjs（Ant Design Vue默认依赖该库）手动转换日期格式：

<template>
    <a-form :model="state" name="basic" autocomplete="off">
         <a-form-item label="Ten cong viec" name="nameJob">
                 <a-input v-model:value="state.nameJob" />
         </a-form-item>
         <a-form-item label="Date" name="date">
                 <a-date-picker v-model:value="state.date" :format="dateFormatList" />
         </a-form-item>
         <a-form-item>
                 <a-button type="primary" html-type="submit" style="margin-left: 10px" @click="handleCreateJob">Submit</a-button>
    </a-form>
</template>
<script setup>
import {reactive} from 'vue';
import dayjs from 'dayjs'; // 引入dayjs库
const dateFormatList = ['DD/MM/YYYY'];
const state = reactive({
    nameJob: '',
    date: ""
});

const handleCreateJob = async () => {
    try {
        // 将Date对象转换为DD-MM-YYYY格式的字符串
        const formattedDate = dayjs(state.date).format('DD-MM-YYYY');
        await createJob({ nameJob: state.nameJob, date: formattedDate })
    } catch (e) {
        // 可在此添加错误处理逻辑
    }
};
</script>

补充说明 #

• format属性仅控制日期选择器的显示格式，value-format才会影响绑定值的实际格式。
• 若你的API实际需要YYYY-MM-DD格式，只需将value-format或format方法的参数改为YYYY-MM-DD即可。

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