我的需求是选择日期后,提交的数据可以是我期望的格式。
然而遇到的问题却是:
代码:
<template>
<a-date-picker v-model:value="receive" />
{{ receive }}
</template>
<script lang='ts'>
import { defineComponent, reactive } from "vue";
import dayjs from "dayjs";
export default defineComponent({
setup() {
const receive = reactive(dayjs());
return {
receive,
};
},
});
</script>
正常来说,我选中了2021-10-23,那么显示的值也应该是2021-10-23,但事实并非如此。
这里有两个坑:
1、本身绑定的就是dayjs()
对象
2、应该用ref而不是reactive
根据Ant Design Vue官方提示,DatePicker必须绑定的是一个dayjs()
对象,如果是字符串,则控制台会报错。
继续寻找其他方法。
找到在官方文档上有这么一个api
按上面的提示,我们只需要给a-date-picker
加上value-format
属性,就可以按照我们想要的设置了,点开具体格式
页面已经移除…
但是看着添转的页面为dayjs
,也大概能猜到它具体的格式应该是怎样的,打开dayjs
中文网
于是代码变为:
<template>
<a-date-picker v-model:value="receive" value-format="YYYY-MM-DD" />
{{ receive }}
</template>
<script lang='ts'>
import { defineComponent, reactive } from "vue";
import dayjs from "dayjs";
export default defineComponent({
setup() {
const receive = reactive(dayjs());
return {
receive,
};
},
});
</script>
按理说问题应该解决,但是并没有
最后发现我被思想禁锢了,觉得是对象,于是便用了reactive
,但其实这里应该用ref
于是最后代码:
<template>
<a-date-picker v-model:value="receive" value-format="YYYY-MM-DD" />
{{ receive }}
</template>
<script lang='ts'>
import { defineComponent, ref } from "vue";
import dayjs from "dayjs";
export default defineComponent({
setup() {
const receive = ref(dayjs());
return {
receive,
};
},
});
</script>
<style lang='less'>
</style>