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>
相关推荐
浪裡遊3 分钟前
Next.js路由系统
开发语言·前端·javascript·react.js·node.js·js
STUPID MAN28 分钟前
Linux使用tomcat发布vue打包的dist或html
linux·vue.js·tomcat·html
JIngJaneIL1 小时前
助农惠农服务平台|助农服务系统|基于SprinBoot+vue的助农服务系统(源码+数据库+文档)
java·前端·数据库·vue.js·论文·毕设·助农惠农服务平台
云外天ノ☼2 小时前
待办事项全栈实现:Vue3 + Node.js (Koa) + MySQL深度整合,构建生产级任务管理系统的技术实践
前端·数据库·vue.js·mysql·vue3·koa·jwt认证
gihigo19982 小时前
使用JavaScript和Node.js构建简单的RESTful API
javascript·node.js·restful
一位搞嵌入式的 genius2 小时前
前端实战开发(三):Vue+Pinia中三大核心问题解决方案!!!
前端·javascript·vue.js·前端实战
前端.火鸡2 小时前
Vue 3.5 新API解析:响应式革命、SSR黑科技与开发体验飞跃
javascript·vue.js·科技
嗝屁小孩纸2 小时前
开发集成热门小游戏(vue+js)
前端·javascript·vue.js
赛博切图仔2 小时前
深入理解 package.json:前端项目的 “身份证“
前端·javascript
UIUV2 小时前
JavaScript 学习笔记:深入理解 map() 方法与面向对象特性
前端·javascript·代码规范