项目开发中使用了element ui的datePicker使用@change 不能调用相关的方法

Question

1.在项目开发的日期选择是这样实现的：

<div>
    <div class="block">
      <el-date-picker
        v-model="value1"
        type="date"
        placeholder="选择日期下限"
        @change="pickTime"
        :picker-options="pickerOptions0">
      </el-date-picker>
    </div>
    <div class="block">
      <el-date-picker
        v-model="value2"
        align="right"
        type="date"
        @change="pickTime"
        placeholder="选择日期上限"
        :picker-options="pickerOptions1">
      </el-date-picker>
    </div>
    
    
     export default {
    name: 'timer',
    data () {
      return {
        pickerOptions0: {
          disabledDate (time) {
            return time.getTime() > Date.now()
          }
        },
        pickerOptions1: {
          disabledDate (time) {
            return time.getTime() > Date.now()
          }
        },
        value1: '',
        value2: ''
      }
    },
    methods: {
      pickTime (val) {
        console.log(val)
      }
    }
  }
 
 但是不知道为什么就是不能触发change事件，不能获得所选的格式化后的值？
    

Answer 1

我使用了@input可以调用方法，但是获得时间需要进过format()进行转化，但我觉的这样更加的灵活了。

Answer 2

这样试试

@change.native="pickTime"

Answer 3

这个问题可能是组件内部有问题，可以去github，element项目上提issues，另外一个建议可以使用我和同学开发的组建库https://github.com/ibufu/dd-v...

Answer 4

<el-date-picker

                                                        v-model="sendData.endTime"
                                                        type="date"
                                                        placeholder="选择日期"
                                                        format="yyyy-MM-dd"
                                                        @change="pickTime"
                                                        :picker-options="pickerOptions0">
                                                </el-date-picker>
                                                
                                                
                                                

然后在pickTime方法里边给你的value1：‘’；value2赋值，你这种我没试过