一、需求
一直以来都没有总结的习惯,所以很多知识其实在项目中都用过但自己还是想不起来。所以现在要学着抽出时间去总结。下面说下这个知识点的来由。(我们项目用的是elementUI组件)
1、类似一个统计图的界面,需要根据时间的查询来显示相应的统计图表
2、由于后台给我的接口需要传入startime和endtime两个参数,后台让我以时间戳的形式传给他(一开始时间是空的接口报500的错误,所以后台说让我默认endtime是当天的日期,starttime是当天的上个月日期、)
3、发现选择起始时间为2018-06-25,结束时间为2018-07-22查询数据。发现一个问题只能查询到2018-07-21之前的数据,不能查到2018-07-22那天的数据。产生这个的原因是elementUI1.4.13版本这个时间是从2018-07-22 00:00:00算的,而数据是在00:00:00之后的查询不到的
二、思考
1、首先我要给startime和endtime默认值
2、选择更改endtime怎么使得(如2018-07-22 00:00:00的时间变成2018-07-22 23:59:59)
3、转成时间戳的形式传给后台
三、解决问题
1、解决给startime和endtime默认值问题,解决方法如下:
(1)vue中template的代码如下:
<templete> <div class="content"> <div class="handle-box MarginBt20"> <!-- 时间 --> <div class="block"> <span class="demonstration ">查询时间</span> <el-date-picker v-model="startDate" type="date" @change="getStartTime" format="yyyy-MM-dd" placeholder="选择开始日期时间"> </el-date-picker> <span>--</span> <el-date-picker v-model="endDate" type="date" @change="getTime" format="yyyy-MM-dd" placeholder="选择结束日期时间"> </el-date-picker> <el-button type="primary" icon="search" @click="search">查询</el-button> </div> </div> </div> </templete>
备注:elementUI中对日期选择器有属性说明,如下图所示:
(2)成功给默认值,vue中data的数据如下:
export default {
data() {
return {
startDate: new Date(new Date().setMonth((new Date().getMonth()-1))),
endDate: new Date(),
}
}
}
2、解决选择更改endtime怎么使得(如2018-07-24 00:00:00的时间变成2018-07-24 23:59:59)
(1)写日期的change事件,我在项目写更改endtime的方法是getTime。主要是想记录自己当时的实现思路。
①、在vue中的script中写methods方法,getTime(date){},打印date是什么,一开始我以为那个date是Date类型,判断类型后才知道是字符串类型的。那么我需要将他转成Date类,解决方法代码如下:
<script> export default { data(){ return{ startDate: new Date(new Date().setMonth((new Date().getMonth()-1))), endDate: new Date() } }, methods:{ getTime(date){ console.log(date); console.log(date.constructor) let self = this; let str = date; str = str.replace(/-/g, \'/\'); let strDate = new Date(str); console.log(strDate) } } } </script>
备注:我更改的endtime日期为2018-07-24,那么在浏览器中打印的结果如下:
②、需要将00:00:00的时间改为23:59:59,我用的是比较笨的方法。就是将Tue Jul 24 2018 00:00:00 GMT+0800 (中国标准时间)转成字符串的年月日,再加上\'23:59:59\'的字符串,输入框的日期依然显示2018-07-24
<script> export default { data(){ return{ startDate: new Date(new Date().setMonth((new Date().getMonth()-1))), endDate: new Date() } }, methods:{ getTime(date){ let self = this; let str = date; str = str.replace(/-/g, \'/\'); let strDate = new Date(str); let Y = strDate.getFullYear() + \'-\'; let M = (strDate.getMonth()+1 < 10 ? \'0\'+(strDate.getMonth()+1) : strDate.getMonth()+1) + \'-\'; let D = strDate.getDate(); let dateAfter = Y+M+D+\' \'+\'23:59:59\'; console.log(dateAfter) self.endDate = new Date(dateAfter); console.log(self.endDate) } } } </script>
备注:浏览器打印的结果为
3、将Tue Jul 24 2018 23:59:59 GMT+0800 (中国标准时间),转成时间戳传给后台
<script> export default { data(){ return{ startDate: new Date(new Date().setMonth((new Date().getMonth()-1))), endDate: new Date() } }, methods:{ getTime(date){ let self = this; let str = date; str = str.replace(/-/g, \'/\'); let strDate = new Date(str); let Y = strDate.getFullYear() + \'-\'; let M = (strDate.getMonth()+1 < 10 ? \'0\'+(strDate.getMonth()+1) : strDate.getMonth()+1) + \'-\'; let D = strDate.getDate(); let dateAfter = Y+M+D+\' \'+\'23:59:59\'; console.log(dateAfter) self.endDate = new Date(dateAfter); console.log(self.endDate) }, //获取统计图信息 getCartogramData(){ let self = this; if(self.startDate ==null || self.endDate ==null){ return } let startTime = self.startDate.getTime(); let endDate = self.endDate.getTime(); self.$axios.post(\'你的数据接口?\'startTime=\'+startTime +\'&endTime=\'+ endDate).then((res) => { /*你的数据进行处理*/ }); } } } </script>