加油,新时代打工!
组件官网: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>