ElementUi el-date-picker时间限制

最新推荐文章于 2025-04-22 17:18:02 发布

@光影@

最新推荐文章于 2025-04-22 17:18:02 发布

阅读量981

点赞数

分类专栏：项目遇到的问题文章标签： elementui

本文链接：https://blog.youkuaiyun.com/qq_33718889/article/details/98629476

版权

项目遇到的问题专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了如何在ElementUi的el-date-picker组件中设置时间限制，包括开始日期、结束日期以及特定时间范围的约束，适用于前端开发者在项目中实现动态日期范围控制的需求。

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

<template lang="html">
  <div>
	<el-form :model="form" 
	  :rules="rules" 
	  ref="ruleForm" 
	  label-width="110px" 
	  size="mini">
      <el-row :gutter="24">
        <el-col :span="8">
          <el-form-item label="活动时间：" prop="time">
            <el-date-picker
              v-model="form.time"
              type="daterange"
              value-format="yyyy/MM/dd"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptions">
            </el-date-picker>
          </el-form-item>
        </el-col>
     </el-row>
  </div>
</template>
<script>
  export default {
    data(){
      return{
        form:{
          time: [],  // 时间为一个数组
        },
        getStartTime: '',  // 定义开始时间
        pickerOptions: {
          // 要用箭头函数否则(this.getStartTime)会存在指向性问题
          disabledDate: time => { 
            let startDate
            if(this.getStartTime){ // 如果开始时间存在
              startDate = new Date(this.getStartTime);
            }else {
              startDate = new Date('2000/01/01')
            }
            return time.getTime() < startDate 
          }
        },
        rules: { //表单规则
          time: [
            { required: true, message: '请选择活动时间', trigger: 'blur'}
          ],
        }
	  }
    },
    methods:{
      
    }
</script>
<style lang="scss" scoped>
</style>