Implemented flatpickr calendar but funky images show up in preview after a date is selected | XM Community
Skip to main content
I implemented the flatpickr calendar in my survey using the following code in source:



```

Enter a date in the past 30 days: <link href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css" rel="stylesheet" />

<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

```

and this in the Javascript:



```

Qualtrics.SurveyEngine.addOnload(function()

{

jQuery("#"+this.questionId+" input[type=text]").flatpickr({minDate:new Date().fp_incr(-30),maxDate:new Date().fp_incr(-1)});

});

```



It works exactly like I want it too but after the date is selected, all the pages following have this funky image that shows up below the questions on both - the desktop and phone previews.!





Any idea what might be causing this? Thanks!
You shouldn't put the stylesheet link inline with your html. Put both the link and the flatpickr script in your survey header.

Leave a Reply