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

最新推荐文章于 2025-10-18 16:01:58 发布

原创最新推荐文章于 2025-10-18 16:01:58 发布 · 8.1k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#elementui 时间选择器 #时间选择器范围 #开始时间结束时间约束 #日期选择器 #时间格式

vue 同时被 3 个专栏收录

9 篇文章

订阅专栏

elementUI

8 篇文章

订阅专栏

前端

3 篇文章

订阅专栏

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

时间格式

新版的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();
					}
				}
			}
		}
	}
}