阅读 190

工作记录五:饿了么时间组件设置时间跨度

需求:

时间跨度限制为两天,选择一个日期后,只能往前选择两天或者往后选择两天(饿了么会自己排序,很棒)

实现: 使用的是组件的picker-options属性:

<el-date-picker
	type="datetimerange"
	v-model="searchObj.time_range"
	size="mini"
	range-separator="to"
	start-placeholder="Start Time"
	end-placeholder="End Time"
	:picker-options="pickerOptions"
/>

// js部分
data(){
	return	{
    	pickerOptions: {
                onPick: (time) => {
                    if (time.minDate && !time.maxDate) {
                        this.timeOptionRange = time.minDate;
                    }
                    if (time.maxDate) {
                        this.timeOptionRange = null;
                    }
                },
                disabledDate: (time) => {
                    let timeOptionRange = this.timeOptionRange;
                    if (this.timeOptionRange) {
                        return (
                            time.getTime() > timeOptionRange.getTime() + maxDay ||
                            time.getTime() < timeOptionRange.getTime() - maxDay
                        );
                    }
                },
            },
    }
}
// onPick方法获取minDate和maxDate,只有当第一次选择选中之后触发disable状态
// disabledDate方法中书写时间判断的逻辑,返回比选中时间大一个时间跨度的时间,
// 或者返回一个比选中时间小一个时间跨度的时间(maxDay表示要设置的时间跨度)
// 不过设置好之后,如果是修改时间,似乎可以把时间跨度设置更大
// 这个问题该怎么解决呢?望大佬指教一下
复制代码
文章分类
前端
文章标签