需求:
限制当前选中日期前后30天不可选,大于当天的不可选。
0.view
effectPictrue.png1.template
<el-date-picker
v-model="rangeDate"
type="daterange"
range-separator="至"
start-placeholder="交易开始日期"
end-placeholder="交易结束日期"
value-format="yyyy-MM-dd"
:picker-options="pickerOptions"
@change="pickerChange"
></el-date-picker>
2.data
data() {
return {
currentDate: '', //当前选中的日期
pickerOptions: {}, //因disabledDate和onPick在data里拿不到值,所以把方法扔到created了。
}
3.created
created() {
this.pickerOptions.disabledDate = (time) => {
if (this.currentDate !== '') { //默认大于当天不可选
let tempTime = 3600 * 1000 * 24 * 30;
let timer = new Date(this.currentDate).getTime(); //转换时间戳(当前选中的日期);
let minTime = timer - tempTime; //前三十天
let maxTime = timer + tempTime; //后三十天
//time.getTime() < minTime 选中日期前三十天不可选
//time.getTime() > Date.now() 大于当天不可选
//time.getTime() > maxTime 选中日期后三十天不可选
return time.getTime() < minTime || time.getTime() > Date.now() || time.getTime() > maxTime;
}
return time.getTime() > Date.now();
}
this.pickerOptions.onPick = ({ minDate }) => {
this.currentDate = minDate.getTime(); //当前日期
if (maxDate) {
//如已选择结束日期重置当前选中,如有要求可在失去焦点时再重置一下,我就不贴代码了。
this.currentDate = '';
}
}
}
网友评论