jQuery datepicker does not work | XM Community
Skip to main content
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.
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).
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.
@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>

```
When I change the language of the survey, this no longer works. Any idea why?
> @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?
> @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

})

});

});

Leave a Reply