Vue

<el-form-item
          label="选择日期："

          prop="timeArrange"

          required

          :label-width="formLabelWidth"

        >

          <el-date-picker

            class="info-form-times"

            v-model="form.timeArrange"

            type="daterange"

            unlink-panels

            value-format="timestamp"

            range-separator="至"

            start-placeholder="起始年月日"

            end-placeholder="结束年月日"

            @change="handleTimestamp"

          ></el-date-picker>

        </el-form-item>

 

 

我在使用elementUI里的日期选择器时，遇到了当没有设置选择器的初始值，首次打开，选择日期后，可以拉起@change事件；而当设置好回显值（初始值）时，无法拉起change事件的问题。

官网的el-date-picker组件的事件有以下三种：

官方文档中的事件

经过测试，当事件绑定改为blur时，拉起handleTimestamp方法成功。看来原因出在事件监听的方式绑定上面。

            @blur="handleTimestamp"

我们再看一下源码中，为什么是blur才行：

node_modules里，date-picker组件源码

node_modules里，date-picker组件内监听picker显示隐藏属性里拉起blur函数，但未拉起change函数。

使用blur事件驱动日期选择器数据问题，完美解决。