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>