Implemented flatpickr calendar but funky images show up in preview after a date is selected | XM Community
Skip to main content
Solved

Implemented flatpickr calendar but funky images show up in preview after a date is selected

  • March 2, 2019
  • 1 reply
  • 51 views

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!

Best answer by TomG

You shouldn't put the stylesheet link inline with your html. Put both the link and the flatpickr script in your survey header.

1 reply

TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • Level 8 ●●●●●●●●
  • Answer
  • March 3, 2019
You shouldn't put the stylesheet link inline with your html. Put both the link and the flatpickr script in your survey header.