vue $1-3——ElementUI的时间选择器（DatePicker）+开始时间到结束时间

最新推荐文章于 2025-12-06 06:39:06 发布

原创最新推荐文章于 2025-12-06 06:39:06 发布 · 1k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue #时间 #elementUI #DatePicker

本文详细介绍了如何在Vue.js项目中使用ElementUI的DatePicker组件来实现日期和时间的选择，包括设置开始时间和结束时间的范围限制，以及如何通过代码获取用户选择的日期时间。

vue $1-3——ElementUI的时间选择器（DatePicker）+开始时间到结束时间

先上实现的效果

在这里插入图片描述

<template>
 <div class="content">
    <div class="search-bar" ref="searchBar">
      <el-form class="search-onlyline" :inline="true">
        <el-form-item label="开始时间:">
          <el-date-picker v-model="createDate" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间" @change="startTimeStatus" style="margin-right: 10px;" :picker-options="pickerOptionsStart"></el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间:">
          <el-date-picker v-model="overDate" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间" @change="endTimeStatus" style="margin-left: 10px;" :picker-options="pickerOptionsEnd"></el-date-picker>
        </el-form-item>
        <el-button type="primary" @click="datasearch">搜索</el-button>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    createDate: "", //开始日期
    overDate: "", //结束日期
    // 设置日期的开始时间范围
    pickerOptionsStart: {
        disabledDate: time => {
          let endDateVal = this.overDate;
          if (endDateVal) {
            return time.getTime() > new Date(endDateVal).getTime();
          }
        }
      },
      //设置日期的结束时间范围不能超过开始时间
      pickerOptionsEnd: {
        disabledDate: time => {
          let beginDateVal = this.createDate;
          if (beginDateVal) {
            return time.getTime() < new Date(beginDateVal).getTime();
          }
        }
      }
  },
  methods: {
      datasearch() {
      console.log(this.createDate);//获取到你所选择的开始时间
      console.log(this.overDate);//获取到你所选择的开始时间
  },
};
</script>

<style scoped>
//引入你需要的css样式，一般像elementUI的样式大小颜色直接用封装好的就可以
</style>