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

Question

我正在嘗試輸入一個日期選擇器工具，以便調查受訪者可以通過單擊該字段來輸入日期，會彈出一個日歷，他們可以選擇日期，然后將日期輸入到 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>

Answer 1

您的問題是在 Qualtrics 中 $ 指的是prototypejs，而不是 jQuery。 因此，您需要執行以下操作：

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

但是，如果 datepicker 代碼本身使用 $ 來引用 jQuery，這可能不起作用。

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

編輯：要在 Quatrics 中實現 datepickr：

將 datepickr 腳本添加到 Qualtrics 標頭（您可以將文件上傳到 Qualtrics，然后獲取文件的 url 以添加到腳本標簽中的標頭）
將 datepickr CSS 添加到 Qualtrics 自定義 CSS
將 JavaScript 添加到您的問題以將 datepickr 添加到輸入元素（例如， datepickr($(this.questionId).down('.InputText')), {dateFormat: 'm/d/Y'});

Answer 2

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

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

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

問題描述

2 個解決方案

解決方案1
1 已采納 2016-10-14 19:31:15

解決方案2
1 2017-02-04 18:08:34

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

問題描述

2 個解決方案

解決方案1 1 已采納 2016-10-14 19:31:15

解決方案2 1 2017-02-04 18:08:34

解決方案1
1 已采納 2016-10-14 19:31:15

解決方案2
1 2017-02-04 18:08:34