关于vue中elementui时间组件开始时间和结束时间的限制问题

最新推荐文章于 2024-11-11 16:15:14 发布

贝塔贝卡贝

最新推荐文章于 2024-11-11 16:15:14 发布

阅读量1.5k

点赞数 1

CC 4.0 BY-SA版权

文章标签： vue

本文链接：https://blog.youkuaiyun.com/Kiruthika/article/details/112853356

本文介绍两种使用Vue.js实现日期选择器的方法，确保结束日期不早于开始日期。通过禁用不符合条件的日期选项来实现这一目标。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如果开始时间和结束时间并存的话，那么就需要对二者做出限制：结束时间>=开始时间&&开始时间<=结束时间
在这里插入图片描述

第一种实现方式：

<template>
   <div>
	<div>
	    开始时间：
	    <el-date-picker
	        v-model="startTime"
	        type="date"
	        placeholder="开始日期"
	        value-format="yyyy-MM-dd"
	        :picker-options="pickerOptionsStart"
	        style="width:14%">
	    </el-date-picker>
	</div>
	
	<div>
	    结束时间：
	    <el-date-picker
	        v-model="endTime"
	        type="date"
	        placeholder="结束日期"
	        value-format="yyyy-MM-dd"
	        :picker-options="pickerOptionsEnd"
	        style="width:14%;margin-top:20px;">
	    </el-date-picker>
	</div>
  </div>
</template>

<script>
export default {
  data(){
    return {
      startTime: '',
      endTime: '',
      pickerOptionsStart: {
        disabledDate: time => {
          if (this.endTime) {
                return time.getTime() > new Date(this.endTime).getTime()
          }
        }
      },
      pickerOptionsEnd: {
        disabledDate: time => {
          if (this.startTime) {
            return time.getTime() < new Date(this.startTime).getTime() - 86400000
          }
        }
      }
    }
  }
}

第二种实现方式：

<template>
  <div>
    <!-- 开始时间 -->
    <div style=" width: 220px; margin: 20px auto 0;">
        <el-date-picker
                v-model="startDate"
                type="date"
                placeholder="选择开始日期"
                value-format="yyyy-MM-dd"
                :picker-options="pickerOptionsStart"
                @change="changeStart">
        </el-date-picker>
    </div>
    <!-- 结束时间 -->
    <div style=" width: 220px; margin: 20px auto 0;">
        <el-date-picker
                v-model="endDate"
                type="date"
                placeholder="选择结束日期"
                value-format="yyyy-MM-dd"
                :picker-options="pickerOptionsEnd"
              @change="changeEnd">
        </el-date-picker>
    </div>
  </div>
</template>

<script>
// 1、引入子组件
export default {
  data(){
    return {
      pickerOptionsStart: {},
      pickerOptionsEnd: {},
      startDate:'',//开始时间
      endDate:'',//结束时间
    }
  },
  methods:{
    changeStart() { // 限制开始时间
        this.pickerOptionsEnd = Object.assign({}, this.pickerOptionsEnd, {
            disabledDate: time => {
              if (this.startDate) {
                    return time.getTime() < new Date(this.startDate).getTime() - 86400000
              }
            }
        })
    },

    changeEnd() { // 限制结束时间
        this.pickerOptionsStart = Object.assign({}, this.pickerOptionsStart, {
            disabledDate: time => {
              if (this.endDate) {
                      return time.getTime() > new Date(this.endDate).getTime()
              }
            }
        })
    }
  }
}
</script>