首页vant Calendar 日历父组件不给传minDate和maxDate怎么写默认值

vant Calendar 日历父组件不给传minDate和maxDate怎么写默认值

时间: 2024-11-29 19:38:13 浏览: 202

在Vant UI的Calendar日历组件中，如果你想要设置`minDate`和`maxDate`但不想直接从父组件传递这两个值，你可以利用JavaScript的日期函数来创建默认范围。在父组件的data或options中，可以初始化这两个属性。例如，你可以这样设置： ```javascript <template> <van-calendar ref="calendar" :default-value="currentDate"></van-calendar> </template> <script> export default { data() { return { currentDate: new Date(), // 默认当前日期 minDate: this.getDefaultMinDate(), maxDate: this.getDefaultMaxDate() }; }, methods: { getDefaultMinDate() { const oneYearAgo = new Date(); oneYearAgo.setFullYear(oneYearAgo.getFullYear() - 1); return oneYearAgo; }, getDefaultMaxDate() { const tomorrow = new Date(); tomorrow.setDate(tomorrow.getDate() + 1); return tomorrow; } } }; </script> ``` 在这里，`getDefaultMinDate()`和`getDefaultMaxDate()`分别返回一年前和明天的日期，作为默认的`minDate`和`maxDate`值。然后你在`<van-calendar>`组件中通过`:default-value`属性显示默认日期，并通过`:min-date`和`:max-date`绑定数据属性。

阅读全文