加油，新時代打工！

組件官網：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>