在 Qualtrics 调查中使用 Javascript 日期选择器 - 将日期携带到调查字段
Using a Javascript Date Selector in Qualtrics survey - carry date to the survey field
我正在尝试输入日期 select 或工具,以便调查受访者可以通过单击字段输入日期,日历会弹出,他们可以 select 日期, 日期将输入到 Qualtrics 问题文本框。
Qualtrics 有自己的日历工具,但问题是日历始终可见。我只希望当他们单击文本框本身或日历图标(都可以)时日历可见。这是 Qualtrics 代码:
Enter a date:
<link href="https://ajax.googleapis.com/ajax/libs/yui/2.9.0/build/calendar/assets/skins/sam/calendar.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/yui/2.9.0/build/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/yui/2.9.0/build/calendar/calendar-min.js"></script> <script>
Qualtrics.SurveyEngine.addOnload(function ()
{
var qid = this.questionId;
var calid = qid + '_cal';
var y = QBuilder('div');
$(y).setStyle({clear:'both'});
var d = QBuilder('div',{className:'yui-skin-sam'},[
QBuilder('div', {id:calid}),
y
]);
var c = this.questionContainer;
c = $(c).down('.QuestionText');
c.appendChild(d);
var cal1 = new YAHOO.widget.Calendar(calid);
cal1.render();
var input = $('QR~' + qid);
$(input).setStyle({marginTop: '20px',width: '150px'});
var p =$(input).up();
var x = QBuilder('div');
$(x).setStyle({clear:'both'});
p.insert(x,{position:'before'});
cal1.selectEvent.subscribe(function(e,dates){
var date = dates[0][0];
if (date[1] < 10)
date[1] = '0' + date[1];
if (date[2] < 10)
date[2] = '0' + date[2];
input.value = date[1] +'-'+date[2]+'-'+date[0];
})
});
</script>
这是我想使用的日历工具,但我不知道如何将日期输入到 Qualtrics 字段文本框中。
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#datepicker" ).datepicker();
} );
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>
您的问题是在 Qualtrics 中 $ 指的是 prototypejs,而不是 jQuery。因此,您需要执行以下操作:
$j = jQuery.noconflict();
$j( function() {
$j( "#datepicker" ).datepicker();
} );
但是,如果日期选择器代码本身使用 $ 来引用 jQuery。
我已经 https://github.com/joshsalverda/datepickr 成功地使用了 Qualtrics。
编辑:
在 Quatrics 中实现 datepickr:
- 将 datepickr 脚本添加到 Qualtrics header(您可以将文件上传到 Qualtrics,然后获取文件的 url 添加到脚本标记中的 header)
- 将日期选择器 CSS 添加到 Qualtrics 自定义 CSS
- 将 JavaScript 添加到您的问题以将 datepickr 添加到输入元素(例如,datepickr($(this.questionId).down('.InputText')), {dateFormat: 'm/d/Y'});
将此 JavaScript 添加到字段以使用普通 HTML 日期输入(不需要 jQuery)。
Qualtrics.SurveyEngine.addOnload(function() {
var textInputs = this.questionContainer.querySelectorAll('input[type="text"]');
if (typeof textInputs[0] !== 'undefined') {
textInputs[0].type = 'date';
}
});
我正在尝试输入日期 select 或工具,以便调查受访者可以通过单击字段输入日期,日历会弹出,他们可以 select 日期, 日期将输入到 Qualtrics 问题文本框。
Qualtrics 有自己的日历工具,但问题是日历始终可见。我只希望当他们单击文本框本身或日历图标(都可以)时日历可见。这是 Qualtrics 代码:
Enter a date:
<link href="https://ajax.googleapis.com/ajax/libs/yui/2.9.0/build/calendar/assets/skins/sam/calendar.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/yui/2.9.0/build/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/yui/2.9.0/build/calendar/calendar-min.js"></script> <script>
Qualtrics.SurveyEngine.addOnload(function ()
{
var qid = this.questionId;
var calid = qid + '_cal';
var y = QBuilder('div');
$(y).setStyle({clear:'both'});
var d = QBuilder('div',{className:'yui-skin-sam'},[
QBuilder('div', {id:calid}),
y
]);
var c = this.questionContainer;
c = $(c).down('.QuestionText');
c.appendChild(d);
var cal1 = new YAHOO.widget.Calendar(calid);
cal1.render();
var input = $('QR~' + qid);
$(input).setStyle({marginTop: '20px',width: '150px'});
var p =$(input).up();
var x = QBuilder('div');
$(x).setStyle({clear:'both'});
p.insert(x,{position:'before'});
cal1.selectEvent.subscribe(function(e,dates){
var date = dates[0][0];
if (date[1] < 10)
date[1] = '0' + date[1];
if (date[2] < 10)
date[2] = '0' + date[2];
input.value = date[1] +'-'+date[2]+'-'+date[0];
})
});
</script>
这是我想使用的日历工具,但我不知道如何将日期输入到 Qualtrics 字段文本框中。
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#datepicker" ).datepicker();
} );
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>
您的问题是在 Qualtrics 中 $ 指的是 prototypejs,而不是 jQuery。因此,您需要执行以下操作:
$j = jQuery.noconflict();
$j( function() {
$j( "#datepicker" ).datepicker();
} );
但是,如果日期选择器代码本身使用 $ 来引用 jQuery。
我已经 https://github.com/joshsalverda/datepickr 成功地使用了 Qualtrics。
编辑: 在 Quatrics 中实现 datepickr:
- 将 datepickr 脚本添加到 Qualtrics header(您可以将文件上传到 Qualtrics,然后获取文件的 url 添加到脚本标记中的 header)
- 将日期选择器 CSS 添加到 Qualtrics 自定义 CSS
- 将 JavaScript 添加到您的问题以将 datepickr 添加到输入元素(例如,datepickr($(this.questionId).down('.InputText')), {dateFormat: 'm/d/Y'});
将此 JavaScript 添加到字段以使用普通 HTML 日期输入(不需要 jQuery)。
Qualtrics.SurveyEngine.addOnload(function() {
var textInputs = this.questionContainer.querySelectorAll('input[type="text"]');
if (typeof textInputs[0] !== 'undefined') {
textInputs[0].type = 'date';
}
});