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])

最低0.47元/天解锁文章

10 条评论

pt_tal 2022.01.11
设置了默认值的话没有跳到默认的年份和月份，在setDate中的if(endDate)判断前加上[code=javascript] this.year = defaultStartDateArr[0] this.month = this.formatNumReverse(defaultStartDateArr[1]) this.showTitle = `${this.year}年${this.month}月`; [/code]
- pt_tal回复pt_tal 2022.01.11
  补充一下 this.year = Number(defaultStartDateArr[0]) 要转为Number

qq_42456577 2021.11.12
楼主，用了这个代码，发现如果默认设置了值后续选中跨月份选中有问题
- b2894lxlx回复qq_42456577 2021.12.23
  changeDate函数中新增这条判断语句 [code=javascript] && !this.startDate && !this.endDate [/code]

童言无忌_c 2021.10.21
从GitHub上来的，谢谢博主噢。
- DDaIYaweN回复童言无忌_c 2021.11.03
  哪篇啊请问

code_txy 2021.09.27
这个是真的吗？我看文档没更新哈哈
- b2894lxlx回复code_txy 2021.09.27
  已经提了
- code_txy回复b2894lxlx 2021.09.27
  昂昂可以哦你赶紧给官方提
- b2894lxlx回复code_txy 2021.09.27
  这个是我自己改的源码，官方还没有更新