vu3中，时间组件el-date-picker起止日期限制——开始日期限制、结束日期限制
index.vue
<template> <div> <el-form ref="formRef" class="inline-form" label-width="130px" :model="formInline" > <el-row> <el-col :span="6"> <el-form-item class="width25" label=" 开始日期： " prop="startDate" :rules="{ required: true, message: '请选择开始日期', trigger: ['blur', 'change'], }" > <el-date-picker v-model="formInline.startDate" :disabled="route.query.type === 'view'" :disabled-date="disabledDateStart" format="YYYY-MM-DD" placeholder="选择日期" type="date" value-format="YYYY-MM-DD" @blur="chageDate" /> </el-form-item> </el-col> <el-col :span="6"> <el-form-item class="width25" label=" 结束日期： " prop="endDate" :rules="{ required: true, message: '请选择结束日期', trigger: ['blur', 'change'], }" > <el-date-picker v-model="formInline.endDate" :disabled="route.query.type === 'view'" :disabled-date="disabledDateEnd" format="YYYY-MM-DD" placeholder="选择日期" type="date" value-format="YYYY-MM-DD" @blur="chageDate" /> </el-form-item> </el-col> </el-row> </el-form> </div> </template> <script setup> const formRef = ref(); const route = useRoute(); const formInline = ref({ startDate: "", //项目开始日期 endDate: "", //项目结束日期 }); const dateVal = (date) => { return Date.parse(new Date(date)); }; // 开始日期限制 const disabledDateStart = (time) => { if (formInline.value.endDate) { return time.getTime() > dateVal(formInline.value.endDate); } }; // 结束日期限制 const disabledDateEnd = (time) => { if (formInline.value.startDate) { return time.getTime() < dateVal(formInline.value.startDate); } }; const chageDate = () => {}; </script> <style lang="scss" scoped></style> 版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！
转载请注明出处，原文链接：https://www.xkablog.com/rfx/10786.html