Vant的日历组件,想要选择今天之前的日期,设置了最小可选日期min-date(比如是2020-01-01),日历弹起之后默认就是从2020-01-01开始,这个可以改变吗,想要默认是当前的时间
<van-calendar
v-model="currentDate"
:min-date="minDate"
:default-date="defaultDate"
></van-calendar>
export default {
data() {
return {
currentDate: new Date(), // 当前日期
minDate: new Date('2020-01-01'), // 最小可选日期
};
},
computed: {
defaultDate() {
// 默认日期为当前日期
let defaultDate = new Date();
// 如果默认日期早于最小可选日期,则将默认日期设置为最小可选日期
if (defaultDate < this.minDate) {
defaultDate = new Date(this.minDate);
}
return defaultDate;
},
},
mounted() {
// 在 mounted 钩子函数中更新 currentDate
this.currentDate = this.defaultDate;
},
};
在 Vant 的日历组件中,如果想要设置最小可选日期 min-date,但是又想默认显示当前日期,可以通过设置 default-date 属性来实现。
具体来说,可以将 default-date 属性设置为当前日期,然后在 mounted 钩子函数中判断当前日期是否早于最小可选日期,如果早于,则将 default-date 属性设置为最小可选日期。
在这个例子中,我们将 default-date 属性设置为一个计算属性 defaultDate,该属性的值为当前日期或最小可选日期中较晚的一个。然后在 mounted 钩子函数中将 currentDate 更新为 defaultDate。这样就可以实现默认显示当前日期,如果最小可选日期早于当前日期,则默认显示最小可选日期。
可以通过设置日历组件的属性default-date来实现将默认日期设置为当前时间。代码示例:
<v-date-picker v-model="selectedDate" :min-date="minDate" :default-date="defaultDate"></v-date-picker>
...
data() {
return {
selectedDate: '', // 当前选择的日期
minDate: '2020-01-01', // 最小可选日期
defaultDate: new Date() // 默认日期为当前时间
}
}
...