How to Attach Flatpickr to a Text Input | XM Community
Skip to main content
Solved

How to Attach Flatpickr to a Text Input

  • 1 October 2018
  • 7 replies
  • 527 views
Hi Community Friends!



I'm working on a "workflow" survey where I need a start date and end date. After some research I saw that TomG recommended flatpickr at https://www.qualtrics.com/community/discussion/792/date-range-picker-javascript.



I checked out flatpickr and the "Basic" date is exactly what I want for my two input fields (start/end dates), but I do not know how to attached the jQuery string - jQuery("#"+this.questionId+" .InputText").flatpickr(); - to each of my start/end inputs.



On my test survey (https://cmu.ca1.qualtrics.com/jfe/preview/SV_5u55r5rrqPQS06h?Q_SurveyVersionID=current&Q_CHL=preview) I got as far as adding the following to the top of the External CSS in the Look and Feel:



<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">

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



Both Javascript & jQuery are out of my league and I would appreciate any help of how I add the jQuery string to my two text input fields given I am clueless but anxious to learn and expand my knowledge!



Best regards,

Rosemarie Lang
@RoseL,



It wasn't obvious to where the date entry questions are in your survey. You could make your Start Date MC question a text form with Start date and End date. Add the JavaScript to your text form question.

!



The JavaScript is:

```

Qualtrics.SurveyEngine.addOnload(function() {

jQuery("#"+this.questionId+" .InputText").flatpickr();

});

```
@TomG - Thank you for your prompt response!



My apologies, I provided the wrong URL:

https://cmu.ca1.qualtrics.com/jfe/preview/SV_bx8m19aGZjok0IZ?Q_SurveyVersionID=current&Q_CHL=preview



I added the JavaScript (as above) and nothing happens. I then changed '#' to Q17 which is the question number and still nothing happens so I changed it back to the original text.



I wanted to do the "Basic" calendar format as per the example at https://flatpickr.js.org/examples/ ... I don't see any other info I need to add.



Your reply would be greatly appreciated!



Thanks,

Rose
Now I see that you added the Flatpickr CSS and JavaScript to External CSS. It should be added to the header (in source <> mode)....and deleted from External CSS.
!

I the removed the script info from the CSS External and added the Flatpickr CSS and JavaScript to the header as you said (image attached) and no calendar appears.



This seems to be very simple so I can't figure out what I am missing here.
That looks correct. What does your JavaScript look like?



Here is a working example: https://marketinview.ca1.qualtrics.com/jfe/preview/SV_bJztV5joU80qSQl/BL_8BSNtd8wzm74noV?Q_SurveyVersionID=current
My JS is attached .... I left the code as is and I changed the "#" to Q17 and neither work.



!

Your example is exactly what I want!
@TomG - I figured out the issue I only needed to paste in "jQuery("#"+this.questionId+" .InputText").flatpickr();" .... I posted the onload info and an extra });



Thank you again for your assistance, I really appreciated your help today!!!



Best regards, Rose

Leave a Reply


Terms & Conditions