Append datepicker to another element != body

[alfredarcifa]

In the props there's only "Append to body" flag. There isn't any : appent to props for config where I can associate a class or an id.

Will scheduled for upcoming releases?

[mengxiong10]

OK, It's a good feature. It will be placed in the next refactoring version when vue3.0 is released.

[iatroshchenko]

@mengxiong10 +! Need to specify which element do I insert it in. How can I insert it in custom element manually now, when there is no such feature?

[mengxiong10]

Use the ref to append to custome element, and use the popup-style to control the position.

    <div>
      <date-picker
        ref="datepicker"
        v-model="value1"
        :popup-style="{ left: 0, top: '100%' }"
        placeholder="Select date"
      ></date-picker>
      <div ref="target" :style="{ position: 'relative' }">target</div>
    </div>

  mounted() {
    const el = this.$refs.datepicker.$refs.popup.$el;
    this.$refs.target.appendChild(el);
  },

[jdcifuentes]

Hello, I have a related question @mengxiong10, what if I need to append the datepicker inside a specific div instead of body, but position relative to an input inside that div?, something like the container's jquery datepicker property.

I really appreciate any help. Thank you.

[mengxiong10]

When you appent the popup inside a specific element, then

1. If you want the position of the popup element to be relative to the specific element. You should set the left and top of popup-style.

<template>
  <div id="app">
    <date-picker ref="datepicker" v-model="value" :popup-style="{ top: '100%', left: '0px' }"></date-picker>
    <div
      ref="target"
      :style="{ position: 'relative', width: '300px', height: '30px', border: '1px solid blue', marginTop: '50px' }"
    ></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: null
    };
  },
  mounted() {
    const el = this.$refs.datepicker.$refs.popup.$el;
    this.$refs.target.appendChild(el);
  }
};
</script>

2. If you want the position of the popup element to be relative to the original input element. You should set popup-style={ position: 'fixed' }.

<template>
  <div id="app">
    <date-picker ref="datepicker" v-model="value" :popup-style="{ position: 'fixed' }"></date-picker>
    <div
      ref="target"
      :style="{ position: 'reletive', width: '300px', height: '30px', border: '1px solid blue', marginTop: '50px' }"
    ></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: null
    };
  },
  mounted() {
    const el = this.$refs.datepicker.$refs.popup.$el;
    this.$refs.target.appendChild(el);
  }
};
</script>

[jdcifuentes]

Thank you.

[phamvanhiepvn]

@mengxiong10 Thank you, you are so handsome