<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>