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

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

我尝试了各种选择，但我仍然无法让我的代码正常工作。 我是否可以引用输入字段并在事件上而不是在页面的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>

---

将脚本结尾修改为以下内容：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

---

你也应该发布你的html。制作一个plunk或一些代码的工作示例可能是一个好主意。