el-date-picker设置开始时间小于结束时间

一. date-picker Template

html 复制代码
<template>
	<el-form-item label="开始时间" prop="startDate">
	  <el-date-picker
		v-model.trim="form.startDate"
		type="datetime"
		placeholder="请选择日期"
		value-format="yyyy-MM-dd HH:mm:ss"
		:picker-options="startTime"
		:disabled="isDetail"
	  ></el-date-picker>
	</el-form-item>
	<el-form-item label="结束时间" prop="endDate">
	  <el-date-picker
		v-model.trim="form.endDate"
		type="datetime"
		placeholder="请选择日期"
		value-format="yyyy-MM-dd HH:mm:ss"
		:picker-options="endTime"
		:disabled="isDetail"
	  ></el-date-picker>
	</el-form-item>
</template>

二. script

javascript 复制代码
<script>
	export default {
		data() {
			return {
				startTime: {
					disabledDate: (time) => {
					  return this.disabledDateStart(time)
					}
				},
				endTime: {
					disabledDate: (time) => {
					  return this.disabledDateEnd(time)
					}
				}
			}
		},
		methods: {
			disabledDateStart (time) {
			  return (
				time.getTime() > new Date(this.form.endDate).getTime()
			  );
			},
			disabledDateEnd (time) {
			  return (
				time.getTime() < new Date(this.form.startDate).getTime()
			  );
			}
		}
	}
</script>
相关推荐
渔舟唱晚@1 小时前
Axios 取消请求的演进:CancelToken vs. AbortController
javascript
GISer_Jing1 小时前
XHR / Fetch / Axios 请求的取消请求与请求重试
前端·javascript·网络
天涯学馆1 小时前
微前端架构设计:从理论到实践的全面指南
前端·javascript·面试
梦想CAD控件1 小时前
(VUE3集成CAD)在线CAD实现焊接符号自定义
前端·javascript·vue.js
白白白白桃乌龙2 小时前
vue2 , el-select 多选树结构,可重名
前端·javascript·vue.js
夏之小星星2 小时前
解决el-select选择框右侧下拉箭头遮挡文字问题
前端·vue.js·elementui
hbrown2 小时前
Flask+LayUI开发手记(八):通用封面缩略图上传实现
javascript·flask·layui
xiaogg36782 小时前
网站首页菜单两种布局vue+elementui顶部和左侧栏导航
前端·vue.js·elementui
神膘护体小月半2 小时前
bug 记录 - 使用 el-dialog 的 before-close 的坑
前端·javascript·bug
wcjwdq2 小时前
Lua和JS的继承原理
javascript·lua·脚本继承