Vue Datepicker渲染时无法显示默认日期问题求助

你代码里有两个关键问题导致默认日期范围不生效：

1. v-model和:value冲突
   Vue中v-model是双向绑定的语法糖，会自动接管组件的值传递，同时手动设置:value会被v-model覆盖，完全起不到作用，必须去掉:value属性。

2. selectedDates初始化错误
   在data返回对象时，this.startDate和this.endDate还没完成初始化，此时它们的值是undefined，所以selectedDates初始是[undefined, undefined]，组件无法识别有效日期范围。

修复后的完整代码：

<template>
    <div>
        <Datepicker
            v-model="selectedDates"
            type="range"            
            @change="onDateChange"
            range            
            :enable-time-picker="false"
            format="MMM dd"
        />
    </div>
</template>

<script>
import Datepicker from "@vuepic/vue-datepicker"

export default {
    components: {
        Datepicker,
    },
    data() {
        // 先计算好日期，避免this访问未初始化变量
        const endDate = new Date()
        const startDate = new Date(endDate)
        startDate.setDate(endDate.getDate() - 7)
        
        return {
            selectedDates: [startDate, endDate],
            startDate,
            endDate
        }
    },
    methods: {
        onDateChange() {
            this.$emit("date-change", this.selectedDates)
        },
    },
}
</script>

额外说明：

• 基于endDate创建startDate，避免重复调用new Date()导致的毫秒级时间差，确保日期范围准确
• 组件现在会直接使用selectedDates的初始值作为默认范围，渲染时就能显示过去7天的日期

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