2025年vue elemet日期选择器设置开始时间不能大于结束时间并且大于等于今天

科技前沿 • 2025-02-06 20:48 • 阅读 61

大家好，我是讯享网，很高兴认识大家。

今天接了个需求，要求如下：

开始时间
- 大于等于当前时间也就是大于等于今天
- 小于等于结束时间
结束时间
- 大于等于当前时间也就是大于等于今天
- 大于等于开始时间

效果图如下：
element日期选择.gif
讯享网

话不多说，直接上代码

<template> <div class="hello"> <el-form :model="basicInfo" size="mini" label-width="100px" > <el-row> <!--开始时间--> <el-col :span="12"> <el-form-item label="开始时间：" prop="startDate" > <el-date-picker v-model="basicInfo.startDate" type="date" :picker-options="pickerOptionsStart" format="yyyy-MM-dd" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择开始时间" style="width: 100%;" > </el-date-picker> </el-form-item> </el-col> <!--结束时间--> <el-col :span="12"> <el-form-item label="结束时间：" prop="endDate" > <el-date-picker v-model="basicInfo.endDate" type="date" :picker-options="pickerOptionsEnd" format="yyyy-MM-dd" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择结束时间" style="width: 100%;" > </el-date-picker> </el-form-item> </el-col> </el-row> </el-form> </div> </template>

讯享网

讯享网<script> export default { 
    name: 'HelloWorld', data() { 
    return { 
    basicInfo: { 
    // 创建时间 此时间可以通过后端接口取服务器时间 或者 用 new Date().getTime() createDate: new Date().getTime(), startDate: '', // 开始时间 endDate: '', // 结束时间 }, // 开始时间限制 pickerOptionsStart: { 
    disabledDate: (time) => { 
    if (this.basicInfo.endDate) { 
    // eslint-disable-next-line max-len return time.getTime() > new Date(this.basicInfo.endDate).getTime() || time.getTime() <= new Date(this.basicInfo.createDate).getTime() - ; } return time.getTime() <= new Date(this.basicInfo.createDate).getTime() - ; }, }, // 结束时间限制 pickerOptionsEnd: { 
    disabledDate: (time) => { 
    if (this.basicInfo.startDate) { 
    return time.getTime() < new Date(this.basicInfo.startDate).getTime(); } return time.getTime() <= new Date(this.basicInfo.createDate).getTime() - ; }, }, }; }, mounted() { 
    }, beforeDestroy() { 
    }, methods: { 
    }, }; </script>

2025年vue elemet日期选择器设置开始时间不能大于结束时间并且大于等于今天

相关推荐