请帮忙,我使用了我在 Vue3 中遇到的第一个datapicker 库。我为这个组件编写了以下代码。
<template>
<VueDatePicker
class="datetimepicker"
v-model="date"
:placeholder="getFormattedPlaceholder()"
@change="onDateChange"
/>
</template>
<script>
import { ref } from 'vue';
import format from 'date-fns/format';
import VueDatePicker from '@vuepic/vue-datepicker';
import '@vuepic/vue-datepicker/dist/main.css';
export default {
components: { VueDatePicker },
props: {
item: {
type: Object,
required: true,
},
},
data() {
return {
date: null,
placeholderText: 'Start Date',
};
},
methods: {
formatDate(dateString) {
const date = new Date(dateString);
return format(date, 'MMMM d, yyyy');
},
getFormattedPlaceholder() {
return this.date ? this.formatDate(this.date) : this.placeholderText;
},
onDateChange() {
// Дополнительные действия при изменении даты, если нужно
},
},
};
</script>
因此,我希望当用户在日期选择器中选择日期时,它以正常格式显示给他(format(date, 'MMMM d, yyyy');)。但由于某种原因它不起作用。请告诉我我在哪里犯了错误?在html
代码中,我看到了一件事,但它向我展示了完全不同的东西......
如果有人遇到同样的问题,那么这里描述显示这个“属性”的实现。如上所述,选择日期后,
placeholder
不显示,组件显示天知道什么(更准确地说,我不明白在DOM树中哪里可以找到它)。最终结果如下所示。