//elementui 时间范围选择 起始差值最大不能超过30天
<el-date-picker v-model="timeRange" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd" format="yyyy-MM-dd" :picker-options="pickerOptions" />
data() { return { choiceDate: null,
pickerOptions: { onPick: ({ maxDate, minDate }) => { if (minDate && this.choiceDate) { this.choiceDate = null } else if (minDate) { this.choiceDate = minDate.getTime() } }, disabledDate: (time) => { const timeOptionRange = this.choiceDate // 获取时间范围(30天的毫秒数) const secondNum = 30 * 24 * 60 * 60 * 1000 if (timeOptionRange) { return (time.getTime() > (this.choiceDate + secondNum)) || (time.getTime() < (this.choiceDate - secondNum)) } return false } }
}
只能选择 开始日期选择的当月 不能跨月选择
private choiceDate: any = null private pickerOptions = { onPick: (data: any) => { this.choiceDate = data.minDate if (data.maxDate) { this.choiceDate = null } }, disabledDate: (time: any) => { if (this.choiceDate) { let m: any = this.choiceDate.getMonth() + 1 < 10 ? '0' + (this.choiceDate.getMonth() + 1) : this.choiceDate.getMonth() + 1 const minTime = new Date(this.choiceDate.getFullYear() + '-' + m + '-01 00:00:00') const maxTime = new Date(this.choiceDate.getFullYear(), m, 0) return time.getTime() < minTime || time.getTime() > maxTime } } }
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用?
- 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了?
- 找不到素材资源介绍文章里的示例图片?
- 模板不会安装或需要功能定制以及二次开发?
发表评论
还没有评论,快来抢沙发吧!