Element: [Bug Report] set a datetimepicker value, I got error

[jackple]

Element UI version

2.0.7

OS/Browsers version

mac/chrome 62.0.3202.94

Vue version

2.5.9

Reproduction Link

https://jsfiddle.net/mmx38qxw/

Steps to reproduce

I use el-date-picker as in the old day:

start_date = '2017-11-30 15:03:48'

<el-date-picker v-model="start_date" type="datetime" size="small">
</el-date-picker>

after I upgrade Vue and element UI, when I first click the el-date-picker, I got error.
I set a breakpoint at the wrong line, it enter two times, the first one is ok, but the second one I got "this date" is undefined...

What is Expected?

normal

What is actually happening?

vue.esm.js?efeb:574 [Vue warn]: Error in render: "TypeError: Cannot read property 'getHours' of undefined"

found in

---> <TimeSpinner>
       <TimePicker>
         <Root>
warn @ vue.esm.js?efeb:574
logError @ vue.esm.js?efeb:1695
globalHandleError @ vue.esm.js?efeb:1690
handleError @ vue.esm.js?efeb:1679
Vue._render @ vue.esm.js?efeb:4439
updateComponent @ vue.esm.js?efeb:2744
get @ vue.esm.js?efeb:3094
run @ vue.esm.js?efeb:3171
flushSchedulerQueue @ vue.esm.js?efeb:2933
(anonymous) @ vue.esm.js?efeb:1795
flushCallbacks @ vue.esm.js?efeb:1716
vue.esm.js?efeb:1699 TypeError: Cannot read property 'getHours' of undefined
    at VueComponent.hours (element-ui.common.js?ccbf:14189)
    at Watcher.get (vue.esm.js?efeb:3094)
    at Watcher.evaluate (vue.esm.js?efeb:3201)
    at Proxy.computedGetter (vue.esm.js?efeb:3452)
    at eval (element-ui.common.js?ccbf:14438)
    at Proxy.renderList (vue.esm.js?efeb:3650)
    at Proxy.render (element-ui.common.js?ccbf:14438)
    at VueComponent.Vue._render (vue.esm.js?efeb:4437)
    at VueComponent.updateComponent (vue.esm.js?efeb:2744)
    at Watcher.get (vue.esm.js?efeb:3094)

<!-- generated by https://eleme-issue.surge.sh DO NOT REMOVE -->

[jackple]

I known why

So I change everywhere I had set string value by default to Date

[josteph]

Still having same issue here with v-model.

[jiaozhouzhou]

请问这个问题怎么解决的

[hexufeng]

请问这个问题怎么解决的?

[yimogit]

为控件绑定值时将绑定的string值转换成Date即可，以下为我二次封装的组件，可做参考

<template>
  <el-date-picker :type="type"
                  :placeholder="placeholder"
                  @change="change"
                  :value-format="format"
                  v-model="currentValue" />
</template>

<script>
export default {
  props: {
    value: {
      type: String
    },
    type: {
      type: String
    },
    placeholder: {
      type: String,
      default: '选择日期'
    },
    valueFormat: {
      type: String
    }
  },
  data() {
    return {
      currentValue: this.value && new Date(this.value),
      format:
        this.valueFormat ||
        (this.type === 'date' ? 'yyyy-MM-dd' : 'yyyy-MM-dd HH:mm:ss')
    }
  },
  watch: {
    value(val) {
      this.currentValue = val && new Date(val)
    }
  },
  methods: {
    change(val) {
      this.currentValue = val && new Date(val)
      this.$emit('input', val)
    }
  }
}
</script>

[hexufeng]

我最后也解决了，我的el-date-picker在一个el-table的一行的某个列中，el-table绑定的值是tableData。
一开始报错的时候，tableDate类似这样：
{
"name1": value1,
"name2": value2,
"duration": {
"startTime": 时间戳
"endTime": 时间戳
}
"name3": {...}
}
其中，duration下的startTime和endTime是作为el-date-picker的v-model绑定的，其他的name1name2name3都没用，此时el-date-picker就会出问题（具体表现为控制台报此issue的错，并且点击选定日期也不起作用，需要关掉重新打开才行）。

解决办法：
把没用的tableData中的字段清理掉，就可以了，很奇怪。