element-ui <el-date-picker> 回显格式 yyyy-MM-dd 传值格式 yyyyMMddHHmmss

<template>
    <!-- 需求:使用 <el-date-picker> 日期插件 前端显示2018-10-22 后台需要传时间戳,对这个日期插件不熟悉,当时搞了好长时间,新增的时候没有问题,但是修改的时候传的值一直不是后台需要的,或者后台返回的值前端绑定不显示问题,最后前后台配合解决 -->
    <div class="demo">
        <!-- 这是新增部分 -->
        <el-date-picker type="date" placeholder="选择日期" v-model="newTime" value-format="yyyyMMddHHmmss" style="width: 100%;"
            @change="newPicker"></el-date-picker>
         <!-- 这是修改部分 -->    
        <el-date-picker type="date" placeholder="选择日期" v-model="editTime" value-format="yyyyMMddHHmmss" style="width: 100%;"
            @change="editPicker"></el-date-picker>
    </div>
</template>
<script>
    export default {
        name: 'demo',
        data() {
            return {
                newTime: null,
                editTime: null,
            }
        },
        created() {
            this.editTime = "20181023000000" // 假设后台返回的值,  修改的时候,先用变量将后台的值存储,切记后台返回的日期格式必须是这样的
        },
        methods: {
            newPicker(val) { 
                console.log(val) // Tue Oct 23 2018 00:00:00 GMT+0800 (中国标准时间)   如果没有用 value-format="yyyyMMddHHmmss" ,打印出来的格式
                console.log(val) // 20181022000000    使用 value-format="yyyyMMddHHmmss" 打印出来的格式
            },
            editPicker(e) {
                console.log(e) // 20181025000000
            }
        }
    }

</script>
<style scoped>

</style>

 

 

posted @ 2018-10-22 16:27  杏杏子  阅读(2577)  评论(0编辑  收藏  举报