Flatpickr not displaying with Simple Layout | XM Community
Solved

Flatpickr not displaying with Simple Layout

courtrc
Rank
Userlevel 4
Badge +9

Has 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...

icon

Best answer by Tom_1842 16 May 2023, 15:23

View original

12 replies

tannerfaragher
Rank
Userlevel 5
Badge +22

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?

R
Rank
Userlevel 5
Badge +11

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

R
Rank
Userlevel 5
Badge +11

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

tannerfaragher
Rank
Userlevel 5
Badge +22

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.

courtrc
Rank
Userlevel 4
Badge +9

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. 

tannerfaragher
Rank
Userlevel 5
Badge +22

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!

Tom_1842
Rank
Userlevel 7
Badge +27

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

 

courtrc
Rank
Userlevel 4
Badge +9

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

courtrc
Rank
Userlevel 4
Badge +9

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

tannerfaragher
Rank
Userlevel 5
Badge +22

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

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!

G
Rank
Userlevel 1
Badge +3

@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? 

Tom_1842
Rank
Userlevel 7
Badge +27

@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.

Leave a Reply


Terms & Conditions