element picker-options时间范围封装

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第4天，点击查看活动详情

有快捷时间： 无快捷时间： 需求： 日期范围选择时有快捷时间选择， 未来时间不可选，月份时不要快捷时间选择

代码实现： vue文件：

	<el-date-picker
            :popper-class="'selector'"
            :picker-options="pickerPushTime"
            value-format="yyyy-MM-dd"
            style="width: 300px"
            v-model="searchForm.timeRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :clearable="false"
            align="right"
		></el-date-picker>
                

data中定义：pickerPushTime: null,

created() {
   // 需要在main.js文件中全局挂载
	this.pickerPushTime = this.$pickerOptions.pickerOptions('showRange')
},
    // 传参shoewRange控制选择是否显示快捷时间选择，如果不需要不传任何参数
    

main.js文件全局挂载：

// 时间选择控制
import pickerOptions from '@/common/utils/picker-options.js'
Vue.prototype.$pickerOptions = pickerOptions

封装后的方法文件： picker-options.js

export default {
	pickerOptions(showRange) 
		if (showRange) {
			return {
                            disabledDate(time) {
                                    const dateTime = new Date()
                                    const startDateTime = dateTime.setDate(dateTime.getDate())
                                    return time.getTime() > new Date(startDateTime).getTime()
                            },
				shortcuts: [
                                    {
                                            text: '近一周',
                                            onClick(picker) {
                                                    const end = new Date()
                                                    const start = new Date()
                                                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
                                                    picker.$emit('pick', [start, end])
                                            }
					},
                                    {
                                            text: '近半个月',
                                            onClick(picker) {
                                                    const end = new Date()
                                                    const start = new Date()
                                                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 15)
                                                    picker.$emit('pick', [start, end])
                                            }
					},
                                    {
                                            text: '近一个月',
                                        onClick(picker) {
                                                const end = new Date()
                                                const start = new Date()
                                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
                                                picker.$emit('pick', [start, end])
                                        }
                                    }
				]
			}
		} else {
                return {
                    disabledDate(time) {
                            const dateTime = new Date()
                            const startDateTime = dateTime.setDate(dateTime.getDate())
                            return time.getTime() > new Date(startDateTime).getTime()
                    }
            }
        }
   }
}
// disabledDate、shortcuts是组件自带得属性变量名，保持一致不要变。 如果还需要其它效果，找到对应得属性在此方法中添加即可。