vue+el使用日期组件限制开始、结束日期选择范围

╰+哭是因爲堅強的太久メ 2023-06-25 08:13 8阅读 0赞

## 前言 ##

记录一下最近使用element UI中的DatePicker，限制开始日期不能选择结束日期之后的日期，同样结束日期不能选择开始日期之前的日期。

## 具体实现 ##

原理是利用DatePicker的`:picker-options`实现。

1.  标签添加`:picker-options`属性

<el-form-item label="开始日期" prop="startDate">
    	 <el-date-picker
    	 	ref="startDate"
    	    v-model="qryTableDate.startDate"
    	    :picker-options="pickerOptionsStart"
    	    type="date"
    	    format="yyyyMMdd"
    	    value-format="yyyyMMdd">
    </el-form-item>
    <el-form-item label="结束日期" prop="endDate">
    	 <el-date-picker
    	 	ref="endDate"
    	    v-model="qryTableDate.endDate"
    	    :picker-options="pickerOptionsEnd"
    	    type="date"
    	    format="yyyyMMdd"
    	    value-format="yyyyMMdd">
    </el-form-item>

1.  return中添加变量

data() {
    	return {
    		...
    		pickerOptionStart: this.startDateFun(),
    		pickerOptionEnd: this.endDateFun(),
    		...
    	}
    }

1.  methods中添加具体方法

startDateFun() {
    	const self = this
    	return {
    		disabledDate(time) {
    			let end = this.qryTableDate.endDate
    			if(end) {
    				end = end.substring(0,4) + '-' + end.substring(4,6) + '-' +end.substring(6,8)
    				return time.getTime() > new Date(end).getTime()
    			}
    		}
    	}
    },
    endDateFun() {
    	const self = this
    	return {
    		disabledDate(time) {
    			let start= this.qryTableDate.startDate
    			if(start) {
    				start= start.substring(0,4) + '-' + start.substring(4,6) + '-' +start.substring(6,8)
    				return time.getTime() < new Date(end).getTime() - 24 * 60 * 60 * 1000
    			}
    		}
    	}
    },

## 后记 ##

有两个地方需要注意，一个是时间格式如果是yyyyMMdd，需要转换成yyyy-MM-dd,因为new Date()不接收yyyyMMdd。另一个是结束日期要减一天，即24 \* 60 \* 60 \* 1000，不然开始和结束日期不能选择同一天。