Hey 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 @courtrc , I use flatpickr relatively successfully, but not sure what layout I’m using.  I’ve doctored it a little using zoom in css to get it to fit more nicely on the screen and make the numbers larger.

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 @tannerfaragher for filling in the gap - I now understand that you mean the simple layout of the survey (theme).  ok, yes - there are issues but does the simple layout still allow you to add in extra css in the theme?  You might need to amend it slightly.

Thanks

Rod Pestell

Hey @Rod_Pestell , thanks so much! Yes, you can still add Custom CSS in the Style section of Look & Feel. However, it appears that you cannot add External CSS in the Simple Layout currently:

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.

Thanks @Rod_Pestell and @tannerfaragher for your responses.

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. 

Hey @courtrc, you are very welcome. And thank you as well @Rod_Pestell!

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!

Hi, I believe Simple Layout does support JavaScript, but from what I can tell it differs in 2 major ways from the other Layouts.

• jQuery is not included by default and must be loaded in the survey's Header
• Many of the selectors/ids/class names are different from the other Layouts. Where other Layouts would use "#"+this.questionId, it appears to be "#question-"+this.questionId with Simple Layout.

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"
});

@tannerfaragher it’s what I used for 2 other surveys related to this third survey so I wanted to keep consistent look and feel. And that theme layout feels the most modern, which was why I chose it from the beginning. 

@Tom_1842 I will give this a try, thank you so much!

@Tom_1842 thank you so much for this. It worked like a charm and looks amazing!

Makes 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!

@Tom_1842 - This code works splendidly for the look & feel, however, it isn’t writing the information to the data. Any ideas why this would be happening? 

@GreyGhost you can save the Flatpickr selection to an Embedded Data field by following the steps in this follow-up post. I am not sure how to save the selection to an Input field like with other layouts, but the Embedded Data field option should work well.