element UI时间组件两种使用方式

Hello World呀

已于 2024-07-11 12:51:28 修改

阅读量613

点赞数 3

分类专栏： Vue 文章标签： javascript vue.js elementui

于 2024-07-11 12:19:44 首次发布

本文链接：https://blog.csdn.net/weixin_45397785/article/details/140348447

版权

Vue 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

加油，新时代打工！

组件官网：https://element.eleme.cn/#/zh-CN/component/date-picker
先上效果图，如下：
在这里插入图片描述

第一种实现方式

在这里插入图片描述

<div class="app-container">
    <el-form
  ref="submitForm"
  :model="submitForm"
  class="form-item table"
  label-width="80px"
  label-position="left"
  :inline="true"
>
  <el-form-item label="开始日期" prop="startDate">
    <el-date-picker
      v-model="submitForm.startDate"
      type="date"
      placeholder="请输入开始日期"
      value-format="yyyy-MM-dd"
      :picker-options="pickerOptionsStart"
    ></el-date-picker>
  </el-form-item>
  <el-form-item label="结束日期" prop="endDate">
    <el-date-picker
      v-model="submitForm.endDate"
      type="date"
      placeholder="请输入开始日期"
      value-format="yyyy-MM-dd"
      :picker-options="pickerOptionsEnd"
    ></el-date-picker>
  </el-form-item>
   <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh"  size="mini" @click="resetQuery">重置</el-button>
  </el-form-item>
</el-form>
  </div>
  
 <script>
export default {
  name: 'statisticsCountyCrops',
data() {
    return {
      loading: true,
       // 开始结束日期限制
      pickerOptionsStart: {
        disabledDate: time => {
          if (this.submitForm.endDate) {
            return (
              time.getTime() >= new Date(this.submitForm.endDate).getTime()
            );
          }
        }
      },
      // 结束日期限制
      pickerOptionsEnd: {
        disabledDate: time => {
          if (this.submitForm.startDate) {
            return (
              time.getTime() <= new Date(this.submitForm.startDate).getTime()
            );
          }
        }
      },
      submitForm: {
        startDate: '',
        endtDate: ''
      },
    };
  },
  
 methods: {
/* get请求 对象参数*/
    getList(){
      statisticsCountyCrops(this.submitForm).then(res =>{
          this.dataList = res.data;
          this.loading = false;
      }).catch(err =>{
       console.error(err)
        this.loading = false;
      })
    },
  /** 搜索按钮操作 */
    handleQuery() {
      this.getList();
    },
   /** 重置按钮操作 */
    resetQuery() {
      this.daterangeCreateTime = [];
      this.resetForm("submitForm");
    },  
  },
};
</scrpit>

第二种实现方式

在这里插入图片描述

<el-form-item label="查询范围">
        <el-date-picker
          v-model="daterangeCreateTime"
          style="width: 240px"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item>
     <script>
     export default {
      data() {
    return {
    daterangeCreateTime: [],
      queryParams:{},
      }
      },
        this.queryParams = {};
      if (null != this.daterangeCreateTime && '' != this.daterangeCreateTime) {
        this.queryParams["startDate"] = this.daterangeCreateTime[0];
        this.queryParams["endDate"] = this.daterangeCreateTime[1];
      }
      }
       <script>