elementUI中DatePicker如何将'-07-22'转成时间戳传给后台

时间:2024-03-09 13:05:32

一、需求

  一直以来都没有总结的习惯,所以很多知识其实在项目中都用过但自己还是想不起来。所以现在要学着抽出时间去总结。下面说下这个知识点的来由。(我们项目用的是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>