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

加油，新时代打工！

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

第一种实现方式

在这里插入图片描述

<div class="app-container"><el-formref="submitForm":model="submitForm"class="form-item table"label-width="80px"label-position="left":inline="true"
><el-form-item label="开始日期" prop="startDate"><el-date-pickerv-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-pickerv-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-pickerv-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>