element-plus中限制日期选择器中的开始日期

light多记一点

已于 2022-08-02 14:43:01 修改

阅读量966

点赞数 2

分类专栏： vue3 文章标签：前端

于 2022-08-02 11:51:13 首次发布

本文链接：https://blog.csdn.net/lucklymm/article/details/126119382

版权

vue3 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

本文介绍了Vue2和Vue3中日期选择器组件禁用日期功能的不同实现方式。在Vue2中，使用`picker-options`属性结合`disabledDate`函数来禁用过去的一天；而在Vue3中，该属性被替换为直接使用`disabledDate`。示例代码展示了如何在两个版本的Vue中设置日期范围只能选择未来的时间。

摘要由CSDN通过智能技术生成

重点

vue2和vue3两者不同点就是：vue3中使用disabledDate这个属性，vue2使用picker-options 这个属性

一、vue2中实现

 <el-dialog title="发布" v-model="publishDialog" width="400px" append-to-body :destroy-on-close="true">
          <el-form :model="publishForm" :rules="rules" label-width="100px" ref="pubRef">
            <el-row>
              <el-col :span="24">
                <el-form-item label="发布时间：" prop="publishTime">
                  <el-date-picker
                      v-model="publishForm.publishTime"
                      type="daterange"
                      range-separator="-"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                     :picker-options="disabledDateFun"
                      clearable
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <div class="dialog-footer" style="text-align: right;">
            <el-button @click="cancel">取 消</el-button>
            <el-button type="primary" @click="submitPub">保 存</el-button>
          </div>
        </el-dialog>

<script>
	/**
		把上面的:disabledDate="disabledDateFun"   替换成:picker-options="disabledDateFun"
		//因为vue3中没有pick-options这个属性
	*/
	data() {
 	 return {
    disabledDateFun: {
      disabledDate(time) {
        return time.getTime() < Date.now() - 8.64e7;  //8.64e7 表示就是一天的时间
      }
    },
  }
}
</script>

二、vue3中实现

<template>
 <el-dialog title="发布" v-model="publishDialog" width="400px" append-to-body :destroy-on-close="true">
          <el-form :model="publishForm" :rules="rules" label-width="100px" ref="pubRef">
            <el-row>
              <el-col :span="24">
                <el-form-item label="发布时间：" prop="publishTime">
                  <el-date-picker
                      v-model="publishForm.publishTime"
                      type="daterange"
                      range-separator="-"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      :disabledDate="disabledDateFun"
                      clearable
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <div class="dialog-footer" style="text-align: right;">
            <el-button @click="cancel">取 消</el-button>
            <el-button type="primary" @click="submitPub">保 存</el-button>
          </div>
        </el-dialog>
</template>        

<script setup>
	 //设置发布日期大于等于当前日期
    const disabledDateFun = (time) => {
      if (time.getTime() < new Date().getTime()) {
        return time.getTime() <= new Date().getTime() - 1 * 8.64e7; //时间范围必须是时间戳
      }
    };
</script>