在 Qualtrics 中修改 JavaScript 日历

Question

我找到了一个在 Qualtrics 问题上嵌入日历的 JavaScript 代码。

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>

它在第一页上运行良好。但是，日历仍然出现在我的 Qualtrics 调查第二页的左角。我应该如何修改上面的代码，以便日历只出现在第一页的日期问题上？

另外，我发现“new Date(2020, 05, 22)”中的“5”是六月（不是五月）。我认为这可能是由于 Javascript 中第一个数字是 0 的逻辑。我应该如何修改代码以显示与实际月份匹配的月份编号？

Answer 1

你把剧本放在哪里了？链接和脚本标签应该放在调查标题中。然后是问题 JavaScript 中的 addOnload 和 addOnReady 函数（不在问题文本中的脚本标签内）。是的，在该日期格式中，月份从 0 开始索引。您可以使用带有实际日期的日期字符串，例如“2020-05-22”。就个人而言，我喜欢使用 flatpickr 作为 Qualtrics 的日期选择器。