el-date-picker日期选择限制选择范围

牧杉-惊蛰

已于 2025-04-18 18:59:24 修改

阅读量5.9k

点赞数 3

文章标签： vue.js javascript ecmascript

于 2023-06-08 09:22:31 首次发布

本文链接：https://blog.youkuaiyun.com/m0_63026408/article/details/131100520

版权

文章介绍了在使用ElementUI的el-date-picker组件时，如何通过picker-options的disabledDate属性来限制用户选择的日期范围，特别是当使用datetimerange类型时，避免单独写两个起始选择器。方法是通过比较时间戳来禁止超出预设开始和结束时间的日期选择。

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

vue2 日期限制

ElementUI的 el-date-picker 使用时，有时候想要限制用户选择的时间范围，但是用的是datetimerange类型的选择器，不想单独写两个起始的选择器。我发现网上的方案大部分都是单独写两个，个别使用datetimerange的选择器说的也不是很清楚，也有一些bug，这里贴出我的解决办法供大家参考；

　　使用picker-options属性的disabledDate去控制范围。返回true代表禁止，就无法点击选择器的确认按钮。

如果在表格使用，就会用到传参 :disabled-date="(current)=>disabledDateEnd(current,scope.row)"

1：vue2

1：在表格中

1：html页面文件

<el-date-picker
    :picker-options="pickerOptions"
    v-model="scope.row.weekPlanWorkload"
    type="date"
    placeholder="选择日期"
    value-format="yyyy-MM-dd">
</el-date-picker>

2：js文件


props: {
    timeDate:{// timeDate.endTime="2023-06-13" timeDate.startTime="2023-06-07"
      type: Object,
    }
  },
data() {
    return {
      pickerOptions:{
        disabledDate: time => {
          return (
            //new Date(this.timeDate.endTime).getTime()<= time.getTime() 
            //|| time.getTime()<= new Date(this.timeDate.startTime).getTime()
            new Date(this.timeDate.endTime).getTime()< time.getTime() || 
            (new Date(this.timeDate.startTime).getTime()-3600*24*1000)
            >time.getTime()
          );
        }
      }
    };
  },

2：在表单中

1：效果展示

屏幕录制 2025-04-17 163348

2：html

<el-row>
          <el-col :span="12">
            <el-form-item label="生效日期:" prop="effectiveDate">
              <el-date-picker
                v-model="form.effectiveDate"
                :picker-options="pickerStart"
                clearable
                placeholder="请选择生效日期"
                type="date"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="失效日期:" prop="expirationDate">
              <el-date-picker
                v-model="form.expirationDate"
                :picker-options="pickerEnd"
                clearable
                placeholder="请选择失效日期"
                type="date"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>

3：js文件

data() {
    return {
      // 可以选择的 开始日期
      pickerStart:{
        disabledDate: time => {
          // 如果有 结束 日期 要选择结束之前的日期
          if(this.form.expirationDate){
            return (
              // 结束日期 小于 开始日期（开始日期不能选择 结束日期之后的日期）
              new Date(this.form.expirationDate).getTime() < time.getTime() 
            );
          }else{
            // 如果没有结束日期 那么都可以选
            return false
          }
        }
      },
      pickerEnd:{
        disabledDate: time => {
          // 如果有开始日期 
          if(this.form.effectiveDate){
            return (
              // 开始日期 必须大于 结束日期（结束日期不能选择开始之前的日期） 
              // 而 -3600*24*1000 减去 一天的时间可以选择当天日期
              (
                (
                  new Date(this.form.effectiveDate).getTime()
                )-3600*24*1000
              )
              >
              (time.getTime())
            );
          }else{
            // 如果没有开始日期 都可以选择
            return false
          }
        }
      },
      form:{
        expirationDate:null,
        effectiveDate:null,
      }
    };
  },

4：封装成组件

1：html部分


<template>
  <div class="">
    <!-- 
        1:thisDate 是否可以包含当天，true-开始/结束日期 同在一天 
        2:thisScope 是否需要日期范围选择 false-不需要就是正常选择日期
    -->
    <el-form ref="form" :model="form" :rules="rules" label-width="90px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="生效日期:" prop="effectiveDate">            
            <StartDate
              :thisVal="form.effectiveDate"
              :thisDate="true"
              :thisScope="false"
              :placeholderVal="'请选择生效日期'"
              :endTime="form.expirationDate"
              @startTimeVal="val=> form.effectiveDate=val"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="失效日期:" prop="expirationDate">
            <EndDate 
              :thisVal="form.expirationDate"
              :thisDate="true"
              :thisScope="false"
              :placeholderVal="'请选择失效日期'"
              :startTime="form.effectiveDate"
              @endTimeVal="val=> form.expirationDate=val"/>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
import StartDate from "@/components/DateScope/startDate"
import EndDate from "@/components/DateScope/endDate";

export default {
  name: "form",
  components: {
    StartDate,
    EndDate 
  },
  props:{
    
  },
  data() {
    return {
      form:{
        effectiveDate:null,
        expirationDate:null,
      }
    };
  },
  created() {
  },
  computed: {
    
  },
  methods: {
    
  },
};
</script>
<style scoped lang="scss">

::v-deep.el-date-editor.el-input{
  width: 100%;
}
.el-select{
  width: 100%;
}
</style>

2：组件

1：startDate.vue

<template>
  <div class="">
    <el-date-picker
      v-model="thisVal"
      :picker-options="pickerStart"
      clearable
      :placeholder="placeholderVal"
      type="date"
      value-format="yyyy-MM-dd"
      @change="selectedStartTime"
    >
    </el-date-picker>
  </div>
</template>

<script>

export default {
  name: "startDate",
  components: {
  },
  props:{
    // 如果是编辑 那么这个就是返显的值
    thisVal:{
      type:String,
      default:null
    },
    placeholderVal:{
      type:String,
      default:"请选择日期"
    },
    // 日期范围是否生效 默认为 true 生效
    thisScope:{
      type:Boolean,
      default:true,
    },
    // 结束日期
    endTime:{
      type:String,
      default:null
    },
    // 是否包含当天，选择当天为结束日期后 开始日期 是否也可以选择当天
    thisDate:{
      type:Boolean,
      default:true,
    },
  },
  watch:{
    "endTime":(val,old)=>{
      console.log("1111111",val)
      console.log("2222222",old)
    }
  },
  data() {
    return {
      startTime:"",
      // 可以选择的 开始日期
      pickerStart:{
        disabledDate: time => {
          // 如果 需要 选择日期 范围
          if(this.thisScope){
            // 如果有 结束 日期 要选择结束之前的日期
            if(this.endTime){
              return (
                //this.thisDate=true 如果 包含 当天 结束日期 小于 开始日期
                // 即 开始日期不能选择 结束日期之后的日期
                this.thisDate ? new Date(this.endTime).getTime() < time.getTime() :
                // 如果 不 包含当天 要减去当天时间 表示 开始日期不能选在结束日期当天
                (new Date(this.endTime).getTime()-3600*24*1000) < time.getTime()
              );
            }else{
              // 如果没有结束日期 那么都可以选
              return false
            }
          }else{
            // 如果不需要
            return false
          }
        }
      },
    };
  },
  created() {
  },
  computed: {
    
  },
  methods: {
    selectedStartTime(val){
      this.thisVal=val;
      this.$emit("startTimeVal",val)//将选择的日期值传给父组件
    }
  },
};
</script>
<style scoped lang="scss">

::v-deep.el-date-editor.el-input{
  width: 100%;
}
.el-select{
  width: 100%;
}
</style>

2：endDate.vue

<template>
  <div class="">
    <!--  -->
    <el-date-picker
      v-model="thisVal"
      :picker-options="pickerEnd"
      clearable
      :placeholder="placeholderVal"
      type="date"
      value-format="yyyy-MM-dd"
      @change="selectedEndTime"
    >
    </el-date-picker>
  </div>
</template>

<script>

export default {
  name: "endDate",
  components: {
  },
  props:{
    // 如果是编辑 那么这个就是返显的值
    thisVal:{
      type:String,
      default:null
    },
    placeholderVal:{
      type:String,
      default:"请选择日期"
    },
    // 日期范围是否生效 默认为 true 生效
    thisScope:{
      type:Boolean,
      default:true,
    },
    // 开始日期 
    startTime:{
      type:String,
      default:null,
    },
    // 是否包含当天，选择当天为开始日期后 过期日期 是否可以选择当天
    thisDate:{
      type:Boolean,
      default:true,
    },
  },
  watch:{
    "startTime":(val,old)=>{
      console.log("1111111",val)
      console.log("2222222",old)
    }
  },
  data() {
    return {
      endTime:"",
      // 可以选择的 结束日期
      pickerEnd:{
        disabledDate: time => {
          // 如果 需要 选择日期 范围
          if(this.thisScope){
            // 如果有开始日期 
            if(this.startTime){
              return (
                //this.thisDate=true 表示 开始日期 必须大于 结束日期
                //即 结束日期不能选择开始之前的日期 -3600*24*1000 减去可以选择当天日期
                this.thisDate ? (
                  (new Date(this.startTime).getTime())-3600*24*1000
                )>(time.getTime())
                // 如果 不包括 当天 
                : (new Date(this.startTime).getTime())>(time.getTime())
              );
            }else{
              // 如果没有开始日期 都可以选择
              return false
            }
          }else{
            // 如果不需要
            return false
          }
        }
      },
    };
  },
  created() {
  },
  computed: {
    
  },
  methods: {
    selectedEndTime(val){
      this.thisVal=val;
      this.$emit("endTimeVal",val);//将选择的日期值传给父组件
    }
  },
};
</script>
<style scoped lang="scss">

::v-deep.el-date-editor.el-input{
  width: 100%;
}
.el-select{
  width: 100%;
}
</style>

vue3日期限制

1：html页面文件

<el-form-item label="开始考评时间" prop="startTime">
    <el-date-picker
        :disabled-date="disabledDateStart"
        v-model="formData.startTime"
        type="date"
        value-format="x"
        placeholder="选择开始考评时间"
        class="!w-190px"
   />
</el-form-item>
<el-form-item label="结束考评时间" prop="endTime">
    <el-date-picker
        :disabled-date="disabledDateEnd"
        v-model="formData.endTime"
        type="date"
        value-format="x"
        placeholder="选择结束考评时间"
        class="!w-190px"
     />
</el-form-item>

2：js文件

const disabledDateStart=(time:Date)=>{
  if(formData.value.endTime){//如果选择了结束时间，那么 可选时间大于结束时间
    return time.getTime() > formData.value.endTime
  }
}
const disabledDateEnd=(time:Date)=>{
  if (formData.value.startTime) {//如果选择了开始时间，那么 可选时间小于开始时间
    return time.getTime() < formData.value.startTime; //时间范围必须是时间戳
  } 
}