<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="起始年月日" @change-placeholder = "end date" End ="handleTimestamp" ></el-date-picker> </el-form-item>
When I use elementUI in the date selector, set the selector encountered no initial value when, for the first time open, select the date, you can pull up @change events; and when the echo set value (initial value), not pull up the change of events issues.
Event el-date-picker component of the official website of the following three:
![](https://upload-images.jianshu.io/upload_images/17711674-99e5c402cf1b4597.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
After testing, when the event was changed to bind blur, pull handleTimestamp method successfully. It seems the reason for the above binding event listeners in the way.
@blur="handleTimestamp"
Let's look at the source code, why blur the job:
![](https://upload-images.jianshu.io/upload_images/17711674-418f5c3f86136338.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
node_modules, the monitor picker date-picker component within the display hidden attributes in pull blur function, but did not pull up the change function.
Use blur event-driven date picker data problems, the perfect solution.