论坛门户网站建设,怎么创作一个微信小程序,原子艺术做的网站怎么样子,龙岩网站建设设计服务背景#xff1a; 使用elenmet plus 组件实现时间选择#xff1b;且日期时间选择不能超过今天#xff1b;连续选中时间的长度范围不能超过7天 效果展示#xff1a; 实现思路#xff1a; 一、使用element组件自带的属性和方法#xff1b; :disabled-datedisabledDate…背景 使用elenmet plus 组件实现时间选择且日期时间选择不能超过今天连续选中时间的长度范围不能超过7天 效果展示 实现思路 一、使用element组件自带的属性和方法 :disabled-datedisabledDate calendar-changecalendarChange blurhandleBlur 二、使用js方法判断通过时间组件选择的时间范围value值是否符合条件。 一、element日期时间组价 布局代码 //布局代码
el-date-picker v-modeldata.valueTwoTimer typedatetimerangevalue-formatYYYY-MM-DD HH:mm:ss range-separator至 start-placeholder开始时间end-placeholder结束时间 :unlink-panelstrue :default-timedata.valueTwoTimer:disabled-datedisabledDate calendar-changecalendarChange blurhandleBlur
/ 核心属性和方法 :disabled-datedisabledDate calendar-changecalendarChange blurhandleBlur //vue3的写法
script setup
import { onMounted, reactive } from vue;
const calendarChange (dates) {let hasSelectDate dates ! null dates.length 0;data.minTime hasSelectDate ? dates[0] : null;
};
const disabledDate (time) {const timeRange 1 * 24 * 60 * 60 * 1000; // 1天时间戳const tempTime Date.now() - timeRange;//是否触发calendarChange() if (data.minTime) {const minTime new Date(data.minTime).getTime();const maxTime new Date(data.minTime).getTime() timeRange * 6;// 最大选择7天时间if (tempTime maxTime) {return time.getTime() minTime || time.getTime() tempTime;}return time.getTime() minTime || time.getTime() maxTime;} else {return time.getTime() tempTime;//不能超过今天}
};
const handleBlur () {data.minTime null;
};
/script
二、自定义的js方法判断 自定义一个判断最大选择7天时间的方法。调取接口时触发此方法、或者时间选择完毕后触发此方法等。 //最大7天
const timeLimite () {const minTime timeToTimestamp(times[0]);const maxTime timeToTimestamp(times[1]);const isOver7 maxTime - minTime timeRange * 7;if (isOver7) {ElMessage({type: warning,message: 历史记录查询时间不能超过7天,});return false;}
}
const timeRange 1 * 24 * 60 * 60 * 1000; // 1天时间戳
const timeToTimestamp (time) {let timestamp Date.parse(new Date(time).toString());return timestamp;
};
