vue 时间日期控件的绑定值

时间：2024-03-09 22:17:48

最近的项目一直有用到element的时间日期控件，积累了点经验

  • date-picker

在子组件el-dialog中用到了date-picker，我从父组件传过去的值是类似’2020-01-01‘的日期字符串，尝试过好几种方法，遇到的一个难题就是，第一次打开dialog会显示值，但是在关闭dialog后重新打开，控件上不显示值

<el-date-picker
  v-model="form.startEnd"
  type="daterange"
  unlink-panels
  range-separator="~"
  start-placeholder="开始日期"
  end-placeholder="结束日期"
/>
 // this.form.startEnd[0] = new Date(Date.parse(row.dateFrom))
 // this.form.startEnd[0] = new Date(row.dateFrom.replace(/-/, \'/\'))
 this.form.startEnd[0] = row.dateFrom

打印了日志发现值传过去了，控件绑定的变量和第一次打开时的值也一样，但就是不显示值，就很气人，奈何刚刚接触vue，学识浅薄，不知道该怎么解决这个坑，于是在dialog前面加了个v-if，强制每次打开时都是一个新的dialog

  • time-picker

同样的，在父组件向子组件传值的时候，值传过去了，但是不显示，或者显示的是当前时间，传过去的string类似于’18：00：00‘

<el-time-picker
  v-model="form.time1_start"
  :picker-options="{selectableRange: \'00:00:00 - 23:59:59\'}"
  arrow-control
  placeholder="开始时间"
/>
 // this.form.time1_start = this.string2DateFormat(row.startTime1)
this.form.time1_start = \'2020-01-01 \' + row.startTime1

怪我没仔细看api，这里的time需要指定日期，在时间前面拼接一个日期就好了

 

相关文章