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

How to Attach Flatpickr to a Text Input

  • October 1, 2018
  • 7 replies
  • 715 views
RoseL
Level 1 ●
Forum|alt.badge.img+10
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

Best answer by TomG

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

    7 replies

    TomG
    Level 8 ●●●●●●●●
    Forum|alt.badge.img+27
    • TomG
    • Level 8 ●●●●●●●●
    • October 1, 2018
    @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(); }); ```
    RoseL
    Level 1 ●
    Forum|alt.badge.img+10
    • RoseL
    • Author
    • Level 1 ●
    • October 1, 2018
    @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
    TomG
    Level 8 ●●●●●●●●
    Forum|alt.badge.img+27
    • TomG
    • Level 8 ●●●●●●●●
    • October 1, 2018
    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.
    RoseL
    Level 1 ●
    Forum|alt.badge.img+10
    • RoseL
    • Author
    • Level 1 ●
    • October 1, 2018
    ! 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.
    TomG
    Level 8 ●●●●●●●●
    Forum|alt.badge.img+27
    • TomG
    • Level 8 ●●●●●●●●
    • Answer
    • October 1, 2018
    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
    RoseL
    RoseL
    Level 1 ●
    Forum|alt.badge.img+10
    • RoseL
    • Author
    • Level 1 ●
    • October 1, 2018
    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!
    RoseL
    Level 1 ●
    Forum|alt.badge.img+10
    • RoseL
    • Author
    • Level 1 ●
    • October 1, 2018
    @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
    Terms & ConditionsAccessibility statement