Modifying JavaScript Calendar in Qualtrics

Question

I found a JavaScript code to embed a calendar on a Qualtrics question.

Enter a survey date:
<link href="https://cdn.jsdelivr.net/npm/pikaday/css/pikaday.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pikaday/1.6.1/pikaday.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/locale/es.js"></script>

<script>
Qualtrics.SurveyEngine.addOnload(function()
{
var inputId = 'QR~' + this.questionId;
moment.locale('en');

var picker = new Pikaday(
        {
        field: document.getElementById(inputId),
        i18n: {
            previousMonth : 'previous month',
            nextMonth     : 'next month',
            months        : moment.localeData()._months,
            weekdays      : moment.localeData()._weekdays,
            weekdaysShort : moment.localeData()._weekdaysShort
        },
        minDate: new Date(2020, 05, 22),
        maxDate: new Date(2020, 05, 26),
        yearRange: [2000, 2020],
        bound: true,
        container: document.getElementById('container')       
    });
});
Qualtrics.SurveyEngine.addOnReady(function()
{
jQuery("#"+this.questionId+" .InputText").attr("readonly",true);

});
</script>

It worked well on the first page. However, the calendar still appeared on the left corner on the second page of my Qualtrics survey. How should I modify the above code so that the calendar only appears on the date question on the first page only?

Also, I found that the "5" in "new Date(2020, 05, 22)" is for June (not May). I think it might be due to the logic that the first number is 0 in Javascript. How should I modify the code to display the month number matching the actual month?

Answer 1

Where did you put the script? The link and script tags should go in the survey header. Then the addOnload and addOnReady functions in the question's JavaScript (not inside script tags in the question text).

Yes, in that date format month is indexed from 0. You could use a date string the with actual dates like "2020-05-22".

Personally, I like to use flatpickr as a date picker with Qualtrics.