uni-calendar日历组件日期范围默认选中及优化存在日期范围后点击第一下、第二下选中为下一日期范围

1.日期范围默认选中:
    该组件未提供默认选择日期范围,需对组件进行修改,步骤如下:
    1)在 uni-calendar 文件下找到 uni-calendar.vue 文件, props 中增加:

defaultRange: {
	type: Array,
	default () {
		return []
	}
},

    watch 方法中增加:

defaultRange(newVal) {
	this.cale.setDefaultChoose(this.nowDate.fullDate, newVal)
	this.weeks = this.cale.weeks
}

    created 方法 new Calendar 中增加:

defaultRange: this.defaultRange

在这里插入图片描述
    2)在 uni-calendar 文件下找到 util.js 文件, constructor 中增加:

// 默认日期范围
if(defaultRange.length > 0 && this.multipleStatus.data.length == 0) {
	this.multipleStatus.before = defaultRange[0]
	this.multipleStatus.after = defaultRange[1]
	this.multipleStatus.data = this.geDateAll(defaultRange[0], defaultRange[1])
}

在这里插入图片描述
    并增加方法 setDefaultChoose:

// 设置默认选中
setDefaultChoose(data, value) {
	if(value > 0) {
		this.multipleStatus.before = value[0]
		this.multipleStatus.after = value[1]
		this.multipleStatus.data = this.geDateAll(value[0],value[1])
	}
	this._getWeek(data)
}

在这里插入图片描述

2.存在日期范围后点击第一下、第二下选中为下一日期范围:
    该组件默认的是选择日期范围之后,点击第一下取消所选择的日期范围,点击第二下、第三下才完成选中下一日期范围,先优化减少用户操作,点击第一下、第二下即可完成下一日期范围的选中。
    在 uni-calendar 文件下找到 util.js 文件,并找到 setMultiple 方法,增加代码即可:在这里插入图片描述

this.multipleStatus.before = fullDate
  • 7
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 7
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值