1.需求: 选择随意一个时间点,只能确认选择前后七天的时间
<el-date-picker style="width:70%" type="datetimerange" v-model="formSearch.selectTimes"
format="yyyy-MM-dd HH:mm" value-format="timestamp"
:star-placeholder="$t('record.startDay')"
:end-placeholder="$t('record.endDay')" :range-separator="$t('common.to')"
clearable
:picker-options="pickerOptions" @change="changeDatePicker"
@focus="focusPickData">
</el-date-picker>
我的做法是data中定义picker-option为空对象 通过method里面去改变picker-option里面的值
首先组件el-data-picker中 type为datetimerange 根据elementUi官方解释中
onpick能获取你当前所选时间的最大值跟最小值
那么可以在方法中先取得最小值 也就是第一次点击的值去判断
//定义一个最小值将他记录为today
var today = null
this.pickerOptions = {
// 获取最大最小值
onPick(min) {
console.log("min" + min.minDate);
console.log("max" + min.maxDate);
if (min.maxDate) {
today = null;
} else {
today = new Date(min.minDate).getTime()
}
},
//控制禁用范围
disabledDate(time) {
if (!time) {
return false;
}
//如果有最小值则控制前后一段时间的禁用范围
if (today) {
return (
time.getTime() - 1000 * 3600 * 24 * 30 * 3 >= today ||
time.getTime() <= today - 1000 * 3600 * 24 * 30 * 3
);
//如果有最大值 那么说明时间选择完成,将禁用范围放开可重新选择
} else {
return false;
}
},
};
项目开发记录点