隐藏Qualtrics库日历，直到输入字段获得焦点 /单击

Question

我只有在日期输入字段获得焦点时才需要显示日历。

我尝试了各种选择，但我仍然可以让我的代码工作。
我不能以某种方式引用输入字段并在事件上渲染日历，而不是在页面的Onload事件上？

库脚本下面：

<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[2] + '/' + date[1] + '/' + date[0];
  })
});
</script>

我在调查标头中加载以下内容：

<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>

Answer 1

将脚本的末端修改为以下(4个新行都标记为//添加此(：

var calDiv = $(qid).down('div.yui-skin-sam');   //add this
calDiv.hide();  //add this
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[2] + '/' + date[1] + '/' + date[0];
    calDiv.hide();  //add this
});
$(input).on('focus', function(event) {  calDiv.show();  }); //add this