官方文档
/#/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开始时间与结束时间约束