vue element-ui DateTimePicker日期时间选择器之开始时间小于结束时间的设置

最新推荐文章于 2025-03-03 15:21:47 发布

萱萱的七彩鱼

最新推荐文章于 2025-03-03 15:21:47 发布

阅读量1.9k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： vue JavaScript 文章标签： javascript vue.js html5

本文链接：https://blog.youkuaiyun.com/Hello__World123/article/details/108578802

JavaScript 同时被 2 个专栏收录

17 篇文章

订阅专栏

vue

9 篇文章

订阅专栏

本文介绍如何使用VueElement UI的DateTimePicker组件实现开始时间和结束时间的选择，确保开始时间不会晚于结束时间，同时提供了详细的代码示例。

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

vue element-ui DateTimePicker日期时间选择器之开始时间小于结束时间的设置

Html：

<el-form-item required label="开始时间">
  <el-date-picker
    type="datetime"
    placeholder="开始日期"
    :picker-options="startTime"
    value-format='yyyy-MM-dd HH:mm:ss'
    default-time="00:00:00"
    v-model="swiperAddForm.startTime"
  ></el-date-picker>
</el-form-item>
<el-form-item required label="结束时间">
  <el-date-picker
    type="datetime"
    placeholder="结束日期"
    :picker-options="endTime"
    value-format='yyyy-MM-dd HH:mm:ss'
    default-time="23:59:59"
    v-model="swiperAddForm.endTime"
  ></el-date-picker>
</el-form-item>

js：

data() {
	return {
		swiperAddForm: {
			startTime: "",
			endTime: ""
		},
		startTime: {
	       disabledDate: time => {
	          if (this.swiperAddForm.endTime) {
	          	// 设置开始时间大于结束时间
	            return time.getTime() > new Date(this.swiperAddForm.endTime).getTime() || time.getTime() < Date.now()
	          } else {
	          	// 设置开始时间小于当前时间
	            return time.getTime() < Date.now()
	          }
	       }
		},
      	// 结束时间大于开始时间
      	endTime: {
	        disabledDate: time => {
	          if (this.swiperAddForm.startTime) {
	            return time.getTime() < new Date(this.swiperAddForm.startTime).getTime() + 86400000
	          } else {
	            return time.getTime() < Date.now()
	          }
	        }
    	}
	}
}