uView日历控件(u-calendar)新增默认起止日期

最新推荐文章于 2025-10-17 16:48:56 发布

原创

最新推荐文章于 2025-10-17 16:48:56 发布 · 9.9k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#js #javascript #uni-app #vue

这篇博客介绍了如何在Vue组件中添加默认开始日期`defaultStartDate`和结束日期`defaultEndDate`属性，并实现`setDate`函数来处理日期。同时，`changeData`函数被更新以处理跨月问题，当默认日期存在但组件内没有日期时，会调用`setDate`。`formatNumReverse`函数用于处理月份和日期前导0的问题。在父组件中，可以通过`:default-start-date`和`:default-end-date`传递日期，并在`nextTick`中确保日期设置生效。

1、在props中新增defaultStartDate、defaultEndDate属性

//默认开始日期
defaultStartDate:{
    type: String,
    default: ''
},
//默认结束日期
defaultEndDate:{
    type: String,
    default: ''
}

2、新增setDate函数

setDate(startDate, endDate = null) {
            const defaultStartDateArr = startDate.split('-')
            this.startYear = defaultStartDateArr[0]
            this.startMonth = this.formatNumReverse(defaultStartDateArr[1])
            this.startDay = this.formatNumReverse(defaultStartDateArr[2])
            this.startDate = this.activeDate = `${this.startYear}-${this.startMonth}-${this.startDay}`
            if (endDate) {
                const defaultEndDateArr = endDate.split('-')
                this.endYear = defaultEndDateArr[0]
                this.endMonth = this.formatNumReverse(defaultEndDateArr[1])
                this.endDay = this.formatNumReverse(defaultEndDateArr[2])