Reputation: 521
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
Upvotes: 0
Views: 4266
Reputation: 1493
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.
Upvotes: 1