在项目中遇到按 日 周 月 的查询,本人解决方法参考链接:https://blog.csdn.net/dongpo997/article/details/111039748
<el-date-picker
v-model="time" :type="dateType"
></el-date-picker>
<script>
// 安装方法:npm i dayjs 或 yarn add dayjs
// 引入 dayjs
import dayjs from "dayjs";
data() {
return {
dateType: 'week', // 可取值 week day month 等
time: null
}
},
methods: {
getDate() {
let start = dayjs(this.time).startOf(this.dateType).format('YYYY-MM-DD');
let end = dayjs(this.time).endOf(this.dateType).format('YYYY-MM-DD');
console.log(start, end);
}
}
</script>
因为涉及到动态切换 日 周 月 的查询条件,所以通过 dateSelectValue 来设置 el-date-picker 的 type 来设置该时间选择器的选择类型。
![](https://i-blog.csdnimg.cn/blog_migrate/74590f1f645a96eb1619bbca7a4b65f4.png)
但是由于 dayjs 中的 startOf 和 endOf 的参数 (day) 与 el-date-picker 的 type(date) 不同,所以在 startOf 和 endOf 的参数传 dateSelectValue 时需要加一步判断,在 dateSelectValue 为 date 时给的参数是 day。
![](https://i-blog.csdnimg.cn/blog_migrate/9071443033e70a344ac93f8432c8244e.png)
startOf 和 endOf 的参数
![](https://i-blog.csdnimg.cn/blog_migrate/f5498cce8100a424bd02de6ca730c885.png)
![](https://i-blog.csdnimg.cn/blog_migrate/390e4b28ce80d61bf74201e3662b7b77.png)
format 的日期格式:
![](https://i-blog.csdnimg.cn/blog_migrate/e6a931942ca0b786ed12196cecc3afbc.png)
关于 dayjs 的内容只有很少一部分,详情参考官网。
如果有人看到了有更好的解决方法,希望可以不吝赐教,谢谢各位了。