在 Qualtrics 中修改 JavaScript 日历

Question

我找到了 JavaScript 代码，用于在 Qualtrics 问题中嵌入日历。

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”是指 6 月（不是 5 月）。我认为这可能是由于Javascript中第一个数字为0的逻辑。我应该如何修改代码以显示与实际月份匹配的月份编号？

Answer 1

你把脚本放在哪里了？ link 和脚本标签应该放在调查 header 中。然后是问题 JavaScript 中的 addOnload 和 addOnReady 函数（不在问题文本中的脚本标签内）。

是的，在该日期格式中，月份是从 0 开始索引的。您可以使用带有实际日期的日期字符串，例如“2020-05-22”。

就个人而言，我喜欢将 flatpickr 用作带有 Qualtrics 的日期选择器。

在 Qualtrics 中修改 JavaScript 日历

Modifying JavaScript Calendar in Qualtrics

javascript

qualtrics