在Qualtrics调查中使用Javascript日期选择器-将日期带入调查字段_Javascript_Html_Calendar_Survey_Qualtrics

在Qualtrics调查中使用Javascript日期选择器-将日期带入调查字段

javascript html calendar

在Qualtrics调查中使用Javascript日期选择器-将日期带入调查字段,javascript,html,calendar,survey,qualtrics,Javascript,Html,Calendar,Survey,Qualtrics,我正在尝试输入一个日期选择器工具，以便调查对象可以通过单击字段输入日期，将弹出一个日历，他们可以选择日期，并且该日期将输入到Qualtrics问题文本框中 Qualtrics有自己的日历工具，但问题是日历总是可见的。我只希望日历在他们单击文本框本身或日历图标（两者都可以）时可见。以下是Qualtrics代码： Enter a date: <link href="https://ajax.googleapis.com/ajax/libs/yui/2.9.0/build/calenda

我正在尝试输入一个日期选择器工具，以便调查对象可以通过单击字段输入日期，将弹出一个日历，他们可以选择日期，并且该日期将输入到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.SurveyEngine.addOnload（函数（）
{
var qid=this.questionId；
var-calid=qid+''u-cal'；
变量y=QBuilder（“div”）；
$（y）.setStyle（{clear:'tware'}）；
var d=QBuilder（'div'，{className:'yui-skin-sam'}[
QBuilder（'div'，{id:calid}），
Y
]);
var c=这个容器；
c=$（c）.down（'.QuestionText'）；
c、 儿童（d）；
var cal1=新的YAHOO.widget.Calendar（calid）；
cal1.render（）；
变量输入=$（'QR~'+qid）；
$（输入）.setStyle（{marginTop:'20px'，width:'150px'}）；
var p=$（输入）.up（）；
var x=QBuilder（“div”）；
$（x）.setStyle（{clear:'tware'}）；
p、 插入（x，{位置：'before'}）；
cal1.selectEvent.subscribe（函数（e，日期）{
var日期=日期[0][0]；
如果（日期[1]<10）
日期[1]=“0”+日期[1]；
如果（日期[2]<10）
日期[2]=“0”+日期[2]；
input.value=日期[1]+'-'+日期[2]+'-'+日期[0]；
})
});

这是我想使用的日历工具，但我不知道如何将日期输入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>


jQuery UI日期选择器-默认功能
$（函数（）{
$（“#日期选择器”）.datepicker（）；
} );
日期：

您的问题是，在Qualtrics中，$指的是prototypejs，而不是jQuery。所以，你需要做一些类似的事情：

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

但是，如果datepicker代码本身使用$引用jQuery，则这可能不起作用

我成功地使用了Qualtrics

编辑：要在Quatrics中实现DatePicker：

将DatePicker脚本添加到Qualtrics标头（您可以将文件上载到Qualtrics，然后在脚本标记中获取要添加到标头的文件的url）

将DatePicker CSS添加到Qualtrics自定义CSS

将JavaScript添加到问题中以将DatePicker添加到输入元素（例如，DatePicker（$（this.questionId）.down（'.InputText'）），{dateFormat:'m/d/Y'}）

将此JavaScript添加到字段以使用普通HTML日期输入（不需要jQuery）

嗯，看来github链接不起作用了…你介意重新链接吗？开玩笑吧！这是因为今天早上的DDOS攻击…我明天会回来查看。我几乎没有Javascript方面的经验。你能解释一下你在Qualtrics中实现这一点的一些步骤吗？嗨，吉本斯，很抱歉，你的水平对我来说太高了。1.你说的Qualtrics header是什么意思？DatePicker脚本是什么？我真的不知道这是什么。我在HTML方面有一些经验，但仅此而已。2.自定义CSS部分在哪里？它是否只针对一个问题？Qualtrics标题和Look&Feel/Advanced下的自定义CSS-它们适用于整个调查。DatePicker脚本，您可以从github的url下载。

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