u-calendar uview日历控件修改range版(新增起始、终止日期;每次show渲染最新起始日期、单次点击起点自动选中当天为终点)

首先新增起始终止日期借鉴了文章:https://blog.csdn.net/qq_47498423/article/details/133914597

接下来是新增的功能点了:

  1. 组件之前存在点击选中新day之后,就算不保存,组件会记忆点击事件,导致外层数据显示和日历控件渲染不一致的问题。
    我的解决思路如下:监听popupValue的每一次变化,当popupValue的值为true(说明组件显示),且mode==range时,给组件赋保存过的起始终止日期。
    修改代码如下: valueCom: { immediate: true, handler(val) { this.popupValue = val; if (val == true&&this.mode == 'range') { this.setDate(this.defaultStartDate, this.defaultEndDate) // 调用方法更新endDate和startDate的值 } } }
    其中setDate在上面链接里面,请参考修改
  2. 我们组提了新的要求,说若用户只点击一下就默认选中当天为起始终止,因此做了第二版的修改。
    我的思路如下,在选中提交的时候将只点击一次的情况筛选出来,再做二次点击处理,手动触发this.dateClick(this.day-1)(day减1是因为第一次触发的时候已经+1了一次了); btnFix函数做逻辑处理。
    将原本的if (!this.startDate || !this.endDate) return替换成以下参考代码:if (!this.startDate || !this.endDate) { startMonth = this.formatNum(this.startMonth); startDay = this.formatNum(this.startDay); startDate = t h i s . s t a r t Y e a r − {this.startYear}- this.startYear{startMonth}- s t a r t D a y ‘ ; s t a r t W e e k = t h i s . g e t W e e k T e x t ( s t a r t D a t e ) t h i s . e n d Y e a r = t h i s . s t a r t Y e a r t h i s . e n d M o n t h = t h i s . s t a r t M o n t h t h i s . e n d D a y = t h i s . s t a r t D a y e n d D a t e = s t a r t D a t e e n d W e e k = s t a r t W e e k t h i s . d a t e C l i c k ( t h i s . d a y − 1 ) ; t h i s . {startDay}`; startWeek = this.getWeekText(startDate) this.endYear = this.startYear this.endMonth = this.startMonth this.endDay = this.startDay endDate = startDate endWeek = startWeek this.dateClick(this.day-1); this. startDay;startWeek=this.getWeekText(startDate)this.endYear=this.startYearthis.endMonth=this.startMonththis.endDay=this.startDayendDate=startDateendWeek=startWeekthis.dateClick(this.day1);this.emit(‘change’, {
    startYear: this.startYear,
    startMonth: this.startMonth,
    startDay: this.startDay,
    startDate: startDate,
    startWeek: startWeek,
    endYear: this.endYear,
    endMonth: this.endMonth,
    endDay: this.endDay,
    endDate: endDate,
    endWeek: endWeek
    });
    }`
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值