+9Has anyone found a solution to implementing Flatpickr with the Simple Layout? I spent way too much time trying to troubleshoot my implementation (which eventually was correct) and still didn’t display the calendar picker because I was using the Simple Layout. Anybody get it to work WITH Simple Layout?
When I preview the survey block or question, I don’t get any errors or anything, but when I click in the input field it literally just does nothing...
Best answer by Tom_1842
Hi, I believe Simple Layout does support JavaScript, but from what I can tell it differs in 2 major ways from the other Layouts.
To put flatpickr in place with Simple Layout, first add the below to the Survey's Header:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.2.3/flatpickr.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.2.3/themes/dark.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.2.3/flatpickr.js"></script>Next, create a Text Entry question and add the below to the question's JavaScript in the OnReady section:
jQuery("#question-"+this.questionId+" .text-input").flatpickr({
dateFormat: "Y-m-d"
});
+23Hey there! I just tested out my Flatpickr with the same result, unfortunately. I know that the Simple Layout is still in progress; Qualtrics notes that not all features are available yet. You can leave feedback for the Simple Layout specifically here and perhaps they could get this fixed?
Hi
If you can confirm how I can tell which layout I use, I’ll take a look and show you some of the setup / code I use.
Thanks
Rod Pestell
aha! Thanks
Thanks
Rod Pestell
+23Hey
The Flatpickr option I use involves adding HTML data in the “Header” in General Look & Feel settings, however. So I would agree with you that there may need to be a slight amendment to the code to allow it to work with the Simple layout.
+9Thanks
I submitted feedback via that survey (not my first time submitting feedback about that theme) but specifically related to the JavaScript for the Text entry question type.
Yeah, I’m not sure there’s anything to be done for now until they support the JavaScript as I didn’t put anything in the External CSS in order for it to work on a different theme. Disappointing, but oh well.
+23Hey
Court, if you don’t mind me asking, can you help explain why you would like to utilize the Simple layout in this use case?
Either way, hope that the Simple layout allows the Flatpickr to work soon for you!
+28Hi, I believe Simple Layout does support JavaScript, but from what I can tell it differs in 2 major ways from the other Layouts.
To put flatpickr in place with Simple Layout, first add the below to the Survey's Header:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.2.3/flatpickr.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.2.3/themes/dark.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.2.3/flatpickr.js"></script>Next, create a Text Entry question and add the below to the question's JavaScript in the OnReady section:
jQuery("#question-"+this.questionId+" .text-input").flatpickr({
dateFormat: "Y-m-d"
});
+9+23Makes perfect sense. Thanks for the context. I hope that the rest of the XM Community team will be able to help come up with a solution!
+28Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.
