How fix datepicker calendar position in element-ui

I have two datepickers in my code and i change them between each other by another parameter(duration which can be Single day or Multi day). By default it set as Single day. First calendar have right position, but when i change from single day to multi day and open range datepicker, calendar which have absolute position sets in top left corner of page (with top:0;left:0 parameters).

I tried change directive v-if to v-show in my code below, and it helps, but there is another problem. For some reason element-ui think that picked value is not range and throw parse error. So i need another solution.

That's piece of code with this datepickers:

<el-date-picker
    v-if="duration === durations.SingleDay"
    placeholder="Enter date"
    value-format="yyyy-MM-dd"
    @input="updateTime($event, 'dateValue')"
    :value="value.dateValue"
></el-date-picker>
<el-date-picker
    v-else-if="duration !== durations.SingleDay"
    placeholder="Enter date"
    type="daterange"
    value-format="yyyy-MM-dd"
    :value="value.dateValue"
    @input="updateTime($event, 'dateValue')"
></el-date-picker>

I want to positionate range datepicker as usual, like in datepicker in Single day parameter.

FIDDLE Demo on fiddle, first open calendar and change type and reopen it, you can see this bug

Solution

In that case, there're two ways to solve this:

Change v-if to v-show
Add different key attributes to the Datepicker components (Vue will know that this is two different components)

In fact, this is not a bug. You use the same component in v-if and v-else. The two component properties are basically the same, so Vue will reuse the previous components, but you should avoid multiplexing complex components in Vue. It's easy to go wrong, which is why you must add a key in v-for in vue.

You did not modify the internal reference this.$refs.reference when you reused the component, and the position of the popover cannot be calculated correctly.