I came across a JavaScript code snippet that allows you to embed a calendar into a Qualtrics question.
Specify a date for the survey:
<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>
The calendar functioned correctly on the initial page. However, it continued to appear in the top left corner on the subsequent pages of my Qualtrics survey. How can I adjust the code so that the calendar displays only on the first-page date question?
Additionally, I noticed that the "5" in "new Date(2020, 05, 22)" represents June instead of May, possibly due to the numerical order starting at 0 in Javascript. What modifications should be made to ensure the correct month is displayed?