【vue+elementui】时间选择器：时间格式、设置时间最大日期或最小日期、设置时间选择范围

最新推荐文章于 2025-03-11 19:43:12 发布

小花花inhere

最新推荐文章于 2025-03-11 19:43:12 发布

阅读量7.9k

点赞数 1

分类专栏： elementUI vue 前端文章标签： elementui 时间选择器时间选择器范围开始时间结束时间约束日期选择器时间格式

本文链接：https://blog.youkuaiyun.com/IT429/article/details/102931317

版权

vue 同时被 3 个专栏收录

9 篇文章

订阅专栏

elementUI

8 篇文章

订阅专栏

前端

3 篇文章

订阅专栏

本文介绍了如何使用ElementUI的时间选择器进行时间格式的自定义，利用value-format属性实现时间字符串的格式化。同时，通过picker-options属性设置时间选择范围，确保开始时间不超过结束时间，提供了一种有效的时间约束解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

时间格式

新版的elementui新增了定义时间格式的属性value-format，这样就不用再自己写js在各种格式间转换。

在这里插入图片描述

例：
下面例子在获取startDate时返回的就是’2019-11-06 11:17:13’

<el-date-picker v-model="startDate" type="date" :value-format="'yyyy-MM-dd HH:mm:ss'"></el-date-picker>

时间选择范围

通常如果是有开始时间、结束时间的话，我们就要设置开始时间不能大过结束时间，同理结束时间不能小于开始时间，我们可以通过picker-options属性来设置。
在这里插入图片描述

页面

<template>
	<div>
		//开始时间
		<el-date-picker v-model="startDate" type="date" 
			:value-format="'yyyy-MM-dd HH:mm:ss'" 
			:picker-options="startDatePicker(endDate)"></el-date-picker>
			
		//结束时间
		<el-date-picker v-model="endDate" type="date" 
			:value-format="'yyyy-MM-dd HH:mm:ss'" 
			:picker-options="endDatePicker(startDate)"></el-date-picker>
	</div>
</template>

<script>
import timeFrame from '@/mixins/timeFrame.js'
export default {
	mixins: [ timeFrame ],
	data () {
		return {
			startDate: '',
			endDate: ''
		}
	}
}
</script>

timeFrame.js

export default {
	startDatePicker(date1, date2) {
		return {
			disableDate(time) {
				if (date1 && date2) {
					//时间要控制在一个范围内时
					return new Date(date1).getTime() > time.getTime() || new Date(date2).getTime < time.getTime();
				} else {
					if (date1) {
						return new Date(date1).getTime() > time.getTime();
					}
					if (date2) {
						return new Date(date2).getTime < time.getTime();
					}
				}
			}
		}
	},

	endDatePicker(date1, date2) {
		return {
			disableDate(time) {
				if (date1 && date2) {
					//时间要控制在一个范围内时
					return new Date(date1).getTime() > time.getTime() || new Date(date2).getTime < time.getTime();
				} else {
					if (date1) {
						return new Date(date1).getTime() > time.getTime();
					}
					if (date2) {
						return new Date(date2).getTime < time.getTime();
					}
				}
			}
		}
	}
}