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

加油,新时代打工!

组件官网:https://element.eleme.cn/#/zh-CN/component/date-picker

先上效果图,如下:

第一种实现方式

html 复制代码
<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>

第二种实现方式

html 复制代码
<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>
相关推荐
别拿曾经看以后~7 分钟前
【el-form】记一例好用的el-input输入框回车调接口和el-button按钮防重点击
javascript·vue.js·elementui
川石课堂软件测试13 分钟前
性能测试|docker容器下搭建JMeter+Grafana+Influxdb监控可视化平台
运维·javascript·深度学习·jmeter·docker·容器·grafana
JerryXZR27 分钟前
前端开发中ES6的技术细节二
前端·javascript·es6
problc42 分钟前
Flutter中文字体设置指南:打造个性化的应用体验
android·javascript·flutter
Gavin_9151 小时前
【JavaScript】模块化开发
前端·javascript·vue.js
懒大王爱吃狼2 小时前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍
待磨的钝刨3 小时前
【格式化查看JSON文件】coco的json文件内容都在一行如何按照json格式查看
开发语言·javascript·json
Devil枫6 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
GIS程序媛—椰子7 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山8 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js