DatePicker Popupsettings appendTo correct implementation

1 Answer 90 Views
DatePicker Popup
Gerald
Top achievements
Rank 1
Gerald asked on 31 May 2024, 10:03 AM

Hello, 

I want to append the DatePickerPopup to the div#app component in Vue, in order to style it and prevent some bugs, but I can't get it to work. 

This is the Datepicker component, contains popupSettings:


				<k-datepicker
					:id="id"
					ref="datepickerInstance"
					v-model="dateObj"
					:name="name"
					:placeholder="''"
                                        :popup-settings="popupSettings"
					:label="labelText"
					:required="required"
...

This is in <script> in data() 


		data() {
			return {
				popupSettings: {
					animate: false,
					appendTo: document.getElementById('app'),
					popupClass: 'k-datepicker-popup-test',
				},

animate and popupClass do work, but appendTo gives the following warning and doesn't work:

[Vue warn]: Invalid prop: type check failed for prop "appendTo". Expected String with value "[object HTMLDivElement]", got HTMLDivElement  

Looking at the API documentation, appendTo needs a HTMLElement, am I missing something? Thanks

1 Answer, 1 is accepted

Sort by
1
Accepted
Konstantin Dikov
Telerik team
answered on 05 Jun 2024, 06:31 AM

Hello Gerald,

It seems that the type for the DatePicker popupSettings.append to is wrongly set and it should be a string. The DatePicker uses a Popup component internally and the appendTo property of the Popup uses a string:

Setting the appendTo: "app" in your scenario should correctly show the popup:

<template>
  <div id="popup-wrapper">
    <div class="row">
      <div class="col-xs-12 col-md-12 example-col">
        <p>DatePicker with default value</p>
        <datepicker
          :style="{ width: '230px' }"
          :default-value="defaultValue"
          :popup-settings="popupSettings"
        ></datepicker>
      </div>
    </div>
  </div>
</template>
<script>
import { DatePicker } from "@progress/kendo-vue-dateinputs";

export default {
  components: {
    datepicker: DatePicker,
  },
  data: function () {
    return {
      popupSettings: {
        appendTo: "popup-wrapper",
      },
      defaultValue: new Date(),
    };
  },
};
</script>

I will forward this to the developers team so they can set the correct type for the popupSettings as well.

 

Regards,
Konstantin Dikov
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources

Tags
DatePicker Popup
Asked by
Gerald
Top achievements
Rank 1
Answers by
Konstantin Dikov
Telerik team
Share this question
or