官方文档

https://element.eleme.cn/#/zh-CN/component/datetime-picker

问题分析

el-date-picker组件需要 :picker-options属性，属性值为data,data的数据来自于methods中的方法。

主要涉及对disabledDate参数的设置。

解决方案

<el-form-item label="开始时间" prop="startTime" ><el-date-picker v-model="form.startTime"  format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" clearable style="width: 100%":picker-options="startDatePicker" :disabled="dialogStatus=='view'" type="datetime"  :placeholder="dialogStatus=='view'?'':'请输入订阅开始时间'"></el-date-picker>
</el-form-item>
<el-form-item label="结束时间" prop="endTime"><el-date-picker v-model="form.endTime"  format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" clearable style="width: 100%":picker-options="endDatePicker"  :disabled="dialogStatus=='view'" type="datetime"  :placeholder="dialogStatus=='view'?'':'请输入订阅结束时间'"></el-date-picker>
</el-form-item>


data() {return {startDatePicker: this.beginDate(),endDatePicker: this.processDate(),}
}
beginDate(){const self = thisreturn {disabledDate(time){if (self.form.endTime) {  //如果结束时间不为空，则小于结束时间return new Date(self.form.endTime).getTime() < time.getTime()} else {// return time.getTime() > Date.now()//开始时间不选时，结束时间最大值小于等于当天}}}
},
processDate() {const  self = thisreturn {disabledDate(time) {if (self.form.startTime) {  //如果开始时间不为空，则结束时间大于开始时间return new Date(self.form.startTime).getTime() > time.getTime()} else {// return time.getTime() > Date.now()//开始时间不选时，结束时间最大值小于等于当天}}}
}

扩展方案

1、只可以选择今天以及今天以后的时间：

pickerOptions0: {disabledDate(time) {return time.getTime() < Date.now() - 8.64e7;//8.64e7=1000*60*60*24一天}
},

2、只可以选择今天以及今天以后十天之内的时间：

        pickerOptions: {disabledDate(time) {return time.getTime() < Date.now() - 8.64e7 || time.getTime() > Date.now() + 10 * 8.64e7;//8.64e7=1000*60*60*24一天}},

3、如果开始时间不为空，则结束时间大于开始时间,且大于当前时间

processDate() {const  self = thisreturn {disabledDate(time) {if (self.form.beginTime) {  //如果开始时间不为空，则结束时间大于开始时间,且大于当前时间return new Date(self.form.beginTime).getTime() > time.getTime() || time.getTime() < Date.now() - 1000*3600*24} else {return time.getTime() < Date.now() - 1000*3600*24//开始时间不选时，结束时间最大值大于等于当天}}}
},

参考文章

elementUI 日期时间选择器el-date-picker开始时间与结束时间约束

Element UI——日期时间选择器el-date-picker开始时间与结束时间约束解决方案相关推荐

将Element UI的时间选择器（DatePicker）的Sat Jan 01 2022 00:00:00 GMT+0800 (中国标准时间)转化为XXXX-XX-XX的格式
将Sat Jan 01 2022 00:00:00 GMT+0800 (中国标准时间)转化为XXXX-XX-XX的格式在使用element UI的时间选择器时,控制台输出的是Sat Jan 01 2 ...
Element UI 日期范围选择器限制只能选今天之前的时间，或者只能选今天之后的时间
<el-date-pickerv-model="value"type="daterange"range-separator="至"pl ...
vue:将Element UI的时间选择器（DatePicker）的Sat Jan 01 2022 00:00:00 GMT+0800 (中国标准时间)转化为XXXX-XX-XX的格式
const myGetTime = (time) => {let yy = time.getFullYear()let mm = time.getMonth() + 1let dd = time ...
Vue iview时间组件DatePicker，设置开始时间和结束时间约束
html模板代码: <FormItem label=""><Row><Col span="11"><DatePicke ...
vue 日期时间选择器_Vue日期时间选择器
vue 日期时间选择器 Vue日期时间选择器 (Vue Datetime picker) Vue Datetime picker BY Vladyslav Shchepotin. Vue日期时间选择器 ...
vue element ui里的日期时间选择器中国标准时间转化为年月日时分秒
<el-date-pickerend-placeholder="结束日期"range-separator="至"start-placeholder=&qu ...
关于Element UI中日期时间选择器在IE浏览器中初始化显示的兼容性问题
一.简单说明项目使用Vue+Element UI进行开发,使用了 DateTimePicker 日期时间选择器. 二.问题描述打开修改对话框(进行选择日期操作可以正常显示),在谷歌浏览器中初始化时 ...
使用element ui 日期选择器获取值后的格式问题
一般情况下,我们需要给后台的时间格式是: "yyyy-MM-dd" 但是使用Element ui日期选择器获取的值是这样的: Fri Sep 22 2017 00:00:00 GM ...
element日期时间选择器限制时间选择（精确到小时）
需求:选一个开始时间,要求精确到小时,小于当前时刻的小时不让选择,只能往后选7天. 如图: 需要element的DateTimePicker 日期时间选择器部分代码如下: <el-form-i ...

Element UI——日期时间选择器el-date-picker开始时间与结束时间约束解决方案