ToB企服应用市场:ToB评测及商务社交产业平台

标题: element-ui时间筛选器 [打印本页]

---

作者: 拉不拉稀肚拉稀    时间: 2024-12-26 20:52
标题: element-ui时间筛选器

1. dateChange(field, range) {
2.       this.queryParams[`${field}Start`] = null;
3.       this.queryParams[`${field}End`] = null;
4.       if (range) {
5.         this.queryParams[`${field}Start`] = range[0];
6.         this.queryParams[`${field}End`] = range[1];
7.       }
8.       this.handleQuery();
9.       // console.log(this.queryParams);
10.     },

复制代码

1. <el-form-item label="时间筛选" prop="pickTimeArr">
2.             <el-date-picker v-model="pickTimeArr"
3. type="datetimerange" range-separator="至" start-placeholder="开始日期"
4.              :clearable="false"
5.              :default-time="['00:00:00', '23:59:59']"
6. end-placeholder="结束日期" value-format="yyyy-MM-dd HH:mm:ss"
7.               @change="val => dateChange('pickTime', val)">
8.             </el-date-picker>
9.       </el-form-item>

复制代码

 注意这个change事件，而且一开始需要先清空嗷，之前你就犯过这种错误。
还有clearable怎么设置，你记住了吗？
还有这个默认的时刻default-time
以及这本身是有默认事件的日期时间选择器，type要整明白 datetimerange
还有一个format。

获取近7天的日期时间

1. methods: {
2.     // 获取近七天的日期
3.     getSevenDay() {
4.       const now = new Date();
5.       const sevenDaysAgo = new Date();
6.       sevenDaysAgo.setDate(now.getDate() - 7);
7.       // this.queryParams.pickTime = [sevenDaysAgo, now];
8.       this.pickTimeArr = [sevenDaysAgo, now];
9.       const yearEnd = now.getFullYear();
10.       const monthEnd = String(now.getMonth() + 1).padStart(2, '0');
11.       const dayEnd = String(now.getDate()).padStart(2, '0');
12.       // 获取当前时间
13.       const hoursNow = String(now.getHours()).padStart(2, '0');
14.       const minutesNow = String(now.getMinutes()).padStart(2, '0');
15.       const secondsNow = String(now.getSeconds()).padStart(2, '0');
16.       this.queryParams.pickTimeEnd = `${yearEnd}-${monthEnd}-${dayEnd} ${hoursNow}:${minutesNow}:${secondsNow}`;
18.       const yearStart = sevenDaysAgo.getFullYear();
19.       const monthStart = String(sevenDaysAgo.getMonth() + 1).padStart(2, '0');
20.       const dayStart = String(sevenDaysAgo.getDate()).padStart(2, '0');
22.       this.queryParams.pickTimeStart = `${yearStart}-${monthStart}-${dayStart} ${hoursNow}:${minutesNow}:${secondsNow}`;
23.     },}

复制代码

这里使用了面向AI编程，学习了新方法https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/padStart
 但是你传值传反了！！！！

这里我们是需要在初始状态就筛选了近7天的数据，因此在created中使用了。

1. created() {
2.     this.getSevenDay();
3.     const driver = this.$route.params && this.$route.params.autoPickDriver;
4.     if (driver) {
5.       this.queryParams.driver = driver;
6.     }
7.     this.getList();
8.   },

复制代码

Vue2生命周期：Vue2生命周期详细解说——周期图示、代码演示变革_vue2 errorcaptured-CSDN博客
还有需要在重置的时间进行再次查询：

1. resetQuery() {
2.       this.resetForm('queryForm');
3.       this.getSevenDay();
4.       this.handleQuery();
5.     },

复制代码

下面是java的接口传参代码： 
你只需要看String pickTimeStart 和 String pickTimeEnd

1.   /** 派单时间 */
2.     @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss")
3.     @ApiModelProperty(value = "派单时间开始")
4.     private String pickTimeStart;
6.     /** 派单时间结束 */
7.     @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss")
8.     @ApiModelProperty(value = "派单时间结束")
9.     private String pickTimeEnd;

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

---

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)

Powered by Discuz! X3.4