@TOC

重点

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>

三、效果图