Element Plus 日期控件(Date Picker) 开始日期和结束日期范围限制

话不多说直接看效果

结束日期 >= 开始日期

image

开始日期 <= 结束日期

image

代码如下

<template>
  <el-date-picker v-model="startDate" :disabled-date="(val) => startPickerOptions" type="date" placeholder="开始日期"></el-date-picker>

  <el-date-picker v-model="endDate" :disabled-date="endPickerOptions" type="date" placeholder="结束日期"></el-date-picker>
</template>
  
<script>
export default {
  data() {
    return {
      startDate: Date.now(), // 开始日期
      endDate: '',   // 结束日期
    };
  },
  methods: {
    startPickerOptions(time) {
      if (this.endDate) {
        return time.getTime() > this.endDate
      }
    },
    endPickerOptions(time) {
      // 禁用结束日期之前的所有日期
      if (this.startDate) {
        return time.getTime() < this.startDate
      }
    },
  },
};
</script>

希望对您有所帮助!

by kizunaT
posted @   KizunaT  阅读(922)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
点击右上角即可分享
微信分享提示
主题色彩