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' ) >= 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' ) <= date_format(str_to_date(#{sendTimeEnd}, '%Y-%m-%d'), '%Y%m%d' ) </if>