vue 日期选择器快捷方式选中本周，本月，本季度，本年，上周，上月，上季度，上年

灵木木

已于 2023-10-19 14:30:50 修改

阅读量971

点赞数

文章标签： vue.js javascript 前端

于 2023-10-08 14:03:10 首次发布

本文链接：https://blog.csdn.net/weixin_44125739/article/details/133679920

版权

标题：

vue 日期选择器快捷方式选中本周，本月，本季度，本年，上周，上月，上季度，上年

效果：

在这里插入图片描述

代码：

页面效果，日期选择器

    <el-date-picker
                    style="width: 100%"
                    v-model="timeList"
                    @change="timeChange"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd"
                    :picker-options="pickerOptions"
                    :default-time="['00:00:00','23:59:59']"
                >
                </el-date-picker>

快捷方式本周，本月，本季度，本年，上周，上月，上季度，上年

        pickerOptions: {
            shortcuts: [{
                text: '本周',
                onClick:(picker)=> {
                    let start = new Date(this.$moment().startOf("week").format("YYYY-MM-DD HH:mm:ss"))
                    let end = new Date(this.$moment().endOf("days").format("YYYY-MM-DD HH:mm:ss"))
                    picker.$emit('pick', [start, end]);
                }
            },{
                text: '本月',
                onClick:(picker)=> {
                    let start = new Date(this.$moment().startOf('month').format("YYYY-MM-DD HH:mm:ss"))
                    let end = new Date(this.$moment().endOf("days").format("YYYY-MM-DD HH:mm:ss"))
                    picker.$emit('pick', [start, end]);
                }
            },{
                text: '本季度',
                onClick:(picker)=> {
                    const start = new Date();
                    start.setMonth(Math.floor(start.getMonth() / 3) * 3);
                    start.setDate(1);
                    const end = new Date(start.getFullYear(), start.getMonth() + 3, 0);
                    picker.$emit('pick', [start, end]);
                }
            },{
               text: '本年',
                onClick:(picker)=> {
                    let start = new Date(this.$moment().startOf("year").format("YYYY-MM-DD HH:mm:ss"))
                    let end = new Date(this.$moment().endOf("days").format("YYYY-MM-DD HH:mm:ss"))
                    picker.$emit('pick', [start, end]);
                }
            },{
                text: '上周',
                onClick:(picker)=> {
                    let start =new Date(this.$moment().week(this.$moment().week() - 1).startOf('week').format("YYYY-MM-DD HH:mm:ss"))
                    let end =new Date(this.$moment().week(this.$moment().week() - 1).endOf('week').format("YYYY-MM-DD HH:mm:ss"))
                    picker.$emit('pick', [start, end]);
                }
            },{
                text: '上月',
                onClick:(picker)=> {
                    let start = new Date(this.$moment().subtract(1, "month").startOf("month").format("YYYY-MM-DD HH:mm:ss"))
                    let end = new Date(this.$moment().subtract(1, "month").endOf("month").format("YYYY-MM-DD HH:mm:ss"))
                    picker.$emit('pick', [start, end]);
                }
            },{
                text: '上季度',
                onClick:(picker)=> {
                        const end = new Date();
                        const start = new Date(end.getFullYear(), Math.floor(end.getMonth() / 3) * 3 - 3, 1);
                        end.setMonth(start.getMonth() + 3);
                        end.setDate(0);
                        picker.$emit('pick', [start, end]);
                }
            },{
                text: '上年',
                onClick:(picker)=> {
                    let start = new Date(this.$moment().subtract(1, "year").startOf("month").format("YYYY-MM-DD HH:mm:ss"))
                    let end = new Date(this.$moment().subtract(1, "year").endOf("month").format("YYYY-MM-DD HH:mm:ss"))
                    picker.$emit('pick', [start, end]);
                }
            }]
        },