jQuery datepicker does not work | XM Community
Skip to main content
Solved

jQuery datepicker does not work

  • January 18, 2019
  • 6 replies
  • 1014 views
I
If I use the javascript-function (see attachemt) to attach the jQuery-datepicker to a text-entry-question, then the datepicker only works if I reference jQuery via "look an feel/header". Here my code for the header: <link href="https://code.jquery.com/ui/1.11.1/themes/ui-lightness/jquery-ui.css" rel="stylesheet" /> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.11.1/jquery-ui.js"></script> And here's my question: Why do i have to reference jQuery in the header, even though jQuery is integrated in qualtrics? Does anyone have an explanation for this? Maybe I am doing something wrong. Thanks in advance and a nice weekend.

Best answer by TomG

@Ingo, I think jQuery or jQueryUI is logging the jQueryUI version. Maybe because it is older or doesn't match the current jQuery version. You could load jQuery UI 1.12: ``` <link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" /> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> ```

6 replies

TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • TomG
  • Level 8 ●●●●●●●●
  • January 18, 2019
You need to reference the jQuery UI in the header since that isn't loaded by Qualtrics (your first and third lines). You shouldn't need to load jQuery itself (your second line).
I
  • Ingo
  • Author
  • January 21, 2019
Thank you very much for your answer. But if I open the Javascript console of my browser and drop "jQuery.ui.version", I get "1.11.1" as feedback. I don't understand that.
TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • TomG
  • Level 8 ●●●●●●●●
  • Answer
  • January 21, 2019
@Ingo, I think jQuery or jQueryUI is logging the jQueryUI version. Maybe because it is older or doesn't match the current jQuery version. You could load jQuery UI 1.12: ``` <link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" /> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> ```
I
A
Forum|alt.badge.img+1
  • afclark82
  • April 8, 2019
When I change the language of the survey, this no longer works. Any idea why?
TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • TomG
  • Level 8 ●●●●●●●●
  • April 8, 2019
> @afclark82 said: > When I change the language of the survey, this no longer works. Any idea why? It would be helpful if you described what exactly you mean by "this no longer works" (i.e., what happens, what does the screen look like, etc.). Have you read the localization documentation and implemented it?
A
Forum|alt.badge.img+1
  • afclark82
  • April 8, 2019
> @TomG said: > > @afclark82 said: > > When I change the language of the survey, this no longer works. Any idea why? > > It would be helpful if you described what exactly you mean by "this no longer works" (i.e., what happens, what does the screen look like, etc.). Have you read the localization documentation and implemented it? I have no idea what the localization means. When I change language from English to French, the date picker does not come up. It is just a blank text box. Same thing happens when I turn it back to English. Here is the current code I am using: In header: <link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" /> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> In Javascript: Qualtrics.SurveyEngine.addOnReady(function() { jQuery("#"+this.questionId+" .InputText").each(function(index){ jQuery(this).datepicker({ yearRange: '2008:2010', dateFormat : 'yy-mm-dd', defaultDate: '2008-01-01', changeMonth: true, changeYear: true }) }); });
Terms & ConditionsAccessibility statement