在Qualtrics調查中使用Javascript日期選擇器 - 將調查日期輸入到調查字段

我試圖輸入日期選擇器工具，以便調查受訪者可以通過單擊該字段輸入日期，日曆將彈出，他們可以選擇日期，日期將輸入到Qualtrics問題文本框。在Qualtrics調查中使用Javascript日期選擇器 - 將調查日期輸入到調查字段

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>

來源

2016-10-14 Chris Ray

您的問題是，在Qualtrics中，$是指prototypejs，而不是jQuery。所以，你需要做的是這樣的：

$j = jQuery.noconflict(); 
$j(function() { 
    $j("#datepicker").datepicker(); 
});

但是，如果日期選擇器代碼本身就是使用$來引用jQuery的可能無法正常工作。

我已經在Qualtrics成功使用了https://github.com/joshsalverda/datepickr。

編輯：要實現datepickr在Quatrics：

添加datepickr腳本Qualtrics頭（您可以將文件上傳到Qualtrics然後獲取文件的URL添加到頁眉中的腳本標記）
datepickr CSS添加到Qualtrics自定義CSS
添加JavaScript來你的問題datepickr添加到輸入元素（例如，datepickr（$（this.questionId）.down（」 inputText的。 '））{日期格式：'米/ d/Y'}）;

來源

2016-10-14 19:31:15

嗯，它似乎github鏈接不工作...你介意relinking？ –

只是在開玩笑！這是由於今天早上的DDOS攻擊......我明天再來看看 –

我幾乎沒有任何exp。與Javascript。您介紹一下在Qualtrics中實施這些步驟的一些步驟嗎？ –

將此JavaScript添加到字段以使用純HTML日期輸入（不需要jQuery）。

Qualtrics.SurveyEngine.addOnload(function() { 
    var textInputs = this.questionContainer.querySelectorAll('input[type="text"]'); 
    if (typeof textInputs[0] !== 'undefined') { 
     textInputs[0].type = 'date'; 
    } 
});

來源

2017-02-04 18:08:34

在Qualtrics調查中使用Javascript日期選擇器 - 將調查日期輸​​入到調查字段

回答

相關問題

在Qualtrics調查中使用Javascript日期選擇器 - 將調查日期輸入到調查字段