vue时间筛选今天、本周、本月、本年

<el-col :span="18">
                        <el-button type="text" :class="{timeButtonFalse:todayButton}" @click="today">今天</el-button>
                        <el-button type="text" :class="{timeButtonFalse:toweekButton}" @click="toweekTime">本周</el-button>
                        <el-button type="text" :class="{timeButtonFalse:tomonthButton}" @click="tomonthTime">本月</el-button>
                        <el-button type="text" :class="{timeButtonFalse:toyearButton}" @click="toyearTime">全年</el-button>
                        <el-date-picker style="margin-left:10px"
                                v-model="value1"
                                format="YYYY-MM-DD"
                                clearable="true"
                                type="daterange"
                                range-separator="-"
                                @change="onPick"
                                start-placeholder="开始时间"
                                end-placeholder="结束时间"
                        >
                        </el-date-picker>
                        <span style="float:right;margin-left:20px;margin-top:10px">累计:<span style="color:red;font-size:22px">{{TotalCount}}</span></span>
                        <span style="float:right;margin-left:20px;margin-top:10px">本月:<span style="color:red;font-size:22px">{{MonthCount}}</span></span>
                        <span style="float:right;margin-left:20px;margin-top:10px">本周:<span style="color:red;font-size:22px">{{WeekCount}}</span></span>
                        <span style="float:right;margin-left:20px;margin-top:10px">昨日:<span style="color:red;font-size:22px">{{YesterdayCount}}</span></span>
                        <span style="float:right;margin-top:10px">今日:<span style="color:red;font-size:22px">{{TodayCount}}</span></span>
                    </el-col>
todayButton:true,
            toweekButton:true,
            tomonthButton:true,
            toyearButton:true,
            value1:'',
            startDate:'',//开始时间
            endDate:'',//结束时间

methods里

//今天
        today(){
            var now = new Date();
            let today = now;
            this.startDate = formatTime(today,'yyyy-MM-dd');
            this.endDate = formatTime(today,'yyyy-MM-dd');
            this.value1 = [today,today]
            this.todayButton = false
            this.toweekButton = true;
            this.tomonthButton = true;
            this.toyearButton = true;
            this.getTfCustomer()
        },
        //本周
        toweekTime(){
            var now = new Date();
            var nowTime = now.getTime() ;
            var day = now.getDay();
            var oneDayTime = 24*60*60*1000 ;
            //显示周一
            var MondayTime = nowTime - (day-1)*oneDayTime ;
            //显示周日
            var SundayTime =  nowTime + (7-day)*oneDayTime ;
            //初始化日期时间
            var monday = this.GMTToStr(new Date(MondayTime));
            var sunday = this.GMTToStr(new Date(SundayTime));
            this.startDate = monday;
            this.endDate = sunday;

            this.value1 = [monday,sunday]
            this.toweekButton = false;
            this.todayButton = true
            this.tomonthButton = true;
            this.toyearButton = true;
            this.getTfCustomer()
        },
        // 本月
        tomonthTime(){

            var firstDate = new Date();
            //开始
            var startDate = firstDate.getFullYear()+"-"+((firstDate.getMonth()+1)<10?"0":"")+(firstDate.getMonth()+1)+"-"+"01";

            var date=new Date();
            var currentMonth=date.getMonth();
            var nextMonth=++currentMonth;
            var nextMonthFirstDay=new Date(date.getFullYear(),nextMonth,1);
            var oneDay=1000*60*60*24;
            var lastDate =  new Date(nextMonthFirstDay-oneDay);
            //结束
            var endDate = lastDate.getFullYear()+"-"+((lastDate.getMonth()+1)<10?"0":"")+(lastDate.getMonth()+1)+"-"+(lastDate.getDate()<10?"0":"")+lastDate.getDate();
            console.log(startDate+endDate);
            this.startDate = startDate;
            this.endDate = endDate;

            this.value1= [startDate,endDate]
            this.tomonthButton = false;
            this.todayButton = true;
            this.toweekButton=true;
            this.toyearButton = true;

            this.getTfCustomer()
        },
        // 本年
        toyearTime(){
            let year = new Date().getFullYear();
            let startDate = year+"-1-1";
            let endDate = year+"-12-31";
            this.value1 = [startDate , endDate]
            this.startDate = startDate;
            this.endDate = endDate;

            this.toyearButton = false;
            this.tomonthButton = true;
            this.todayButton = true;
            this.toweekButton=true;
            this.getTfCustomer()
        },
        GMTToStr(time){
            let date = new Date(time)
            let Str=date.getFullYear() + '-' +
                (date.getMonth() + 1) + '-' +
                date.getDate() + ' '
            return Str
        },
        onPick(){
        console.log(this.value1)
        if(this.value1 == null){
          this.startDate = '';
          this.endDate = '';
        }else{
          this.startDate = formatTime(this.value1[0],'yyyy-MM-dd')
          this.endDate = formatTime(this.value1[1],'yyyy-MM-dd')
        }
       console.log(this.startDate)
            console.log(this.endDate)
            this.getTfCustomer()
        },

样式

.timeButtonFalse{
    color: #999999;
}

mybatis

<if test="sendTimeStart != null and sendTimeStart != ''">
                and date_format( a.send_time, '%Y%m%d' ) &gt;= date_format(str_to_date(#{sendTimeStart}, '%Y-%m-%d'), '%Y%m%d' )
            </if>
            <if test="sendTimeEnd != null and sendTimeEnd != ''">
                and date_format( a.send_time, '%Y%m%d' ) &lt;= date_format(str_to_date(#{sendTimeEnd}, '%Y-%m-%d'), '%Y%m%d' )
            </if>

 

posted @ 2022-06-09 11:32  梦幻&浮云%  阅读(888)  评论(0编辑  收藏  举报