vue框架,elementUI中的日期选择器两个时间戳转化为字符串,并以参数的形式发送请求

258 阅读1分钟

首先在vue组件中

<template>
    <div>
        <el-date-picker
            v-model = "timeList"
            type = "daterange"
            range-separator = "至"
            start-placeholder = "开始日期"
            end-placeholder="结束日期"            
            value-format="yyyy-MM-dd"
          >
        </el-date-picker>
    </div>
</template>

<script>

export dafault {
    data(){
        return {
            timeList:[],//储藏两个日期
            //开始日期的数据
            startTime:'',
            year:'',
            month:'',
            day:'',
            //结束日期的数据
            endTime:'',
            newYear:'',
            newMonth:'',
            newDay:'',
        }
    },
    // 注意在mounted中定义这些 时间对象
    mounted(){
        const newDate = new Date()
        this.newYear= newDate.getFullYear() + ''        
        this.newMonth= newDate.parseFloat(newDate.getMonth()) + 1        
        this.newDay= newDate.getDate() + ''        
        // 默认页面一刷新的时间段为当前时间前一周 至 当前时间 
        const date = new Date(newDate.getTime() - 7 * 24 * 3600 * 1000) 
        this.year = date.getFullYear() + ''        
        this.month = date.parseFloat(newDate.getMonth()) + 1        
        this.day = date.newDate.getDate() + ''
        
        //拼接
        this.startTime = this.year + '-' + this.month + '-' + this.day // 开始时间
        this.endTime = this.newYear + '-' + this.newMonth + '-' +this.newDay // 结束时间
       
        this.timeList = [this.startTime, this.endTime]
    }
}
</script>

这样就可以以字符串形式传参啦~~~