高端网站开发设计,海南千筑建设工程有限公司网站,p2p网站如何建设,铜山区建设局局网站效果 思路
查阅elemnet plus官网#xff0c;日期时间选择器typedatetimerange这个选中开始时间并没有对应事件会被触发#xff0c;因此思路更换成typedatetime的两个组成一起可以通过监听开始时间v-model的值变化更新结束时间的值。
代码
日期时间…效果 思路
查阅elemnet plus官网日期时间选择器typedatetimerange这个选中开始时间并没有对应事件会被触发因此思路更换成typedatetime的两个组成一起可以通过监听开始时间v-model的值变化更新结束时间的值。
代码
日期时间选择器
templatediv classdataStyleel-date-picker v-modelstartTime typedatetime classstartStyle placeholder请选择开始时间:disabled-datedisabledFutureDate /-el-date-picker v-modelendTime typedatetime classendStyle placeholder请选择结束时间:disabled-datedisabledEndDate //div
/templatescript setup
import { ref, watch } from vue;// 定义开始时间和结束时间
const startTime ref();
const endTime ref();// 禁用未来日期
const disabledFutureDate (time) {const now new Date();// 禁用当天 23:59:59 之后的时间const endOfToday new Date(now.getFullYear(), now.getMonth(), now.getDate(), 23, 59, 59);return time.getTime() endOfToday.getTime();
};// 自动设置结束时间为开始时间的 30 分钟后
watch(startTime, (newStartTime) {if (newStartTime) {const start new Date(newStartTime); // 将开始时间转换为日期对象const newEndTime new Date(start.getTime() 30 * 60 * 1000); // 增加30分钟endTime.value newEndTime; // 设置结束时间}
});
//允许结束时间只能大于或等于开始时间
const disabledEndDate (time) {if (!startTime.value) return disabledFutureDate(time);const start new Date(startTime.value);return time.getTime() start.getTime() || disabledFutureDate(time);
};
/script
style langscss
.startStyle,
.endStyle {.el-input__wrapper {border-radius: 0;box-shadow: none}
}
/stylestyle langscss scoped
.dataStyle {background-color: #fff;width: 24rem;display: flex;.startStyle .endStyle {width: 12rem;}
}
/style日期选择器
templatediv classparentStyleel-date-picker classleftStyle popper-classleftPopper v-modelform.startTime typedate:disabled-datedisabledDateStart placeholder选择开始日期 /-el-date-picker classrightStyle popper-classrightPopper v-modelform.endTime typedate:disabled-datedisabledDate placeholder选择结束日期 //div/templatescript setup
import dayjs from dayjs;
import { reactive, watch } from vue;
const form reactive({startTime: ,endTime:
});
watch(() form.startTime, (newValue, oldValue) {if (newValue) {const start dayjs(newValue)form.endTime new Date(start.add(1, day).toISOString()) // 使用 ISO 8601 格式console.log(form);}
})
const disabledDateStart (time) {return time.getTime() Date.now();
}
const disabledDate (time) {if (!form.startTime) {return false; // 若未选择开始时间不禁用任何日期}return time.getTime() form.startTime;
}/script
style langscss
.leftStyle,
.rightStyle {.el-input__wrapper {border-radius: 0;box-shadow: none}
}.leftPopper {}.rightStyle {}
/stylestyle langscss scoped
.parentStyle {background-color: #fff;width: 20rem;display: flex;align-items: center;justify-content: space-between;border-radius: 5rem;.leftStyle,.rightStyle {width: 9rem;}
}
/style
