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

时间:2018-02-20 14:37:46

标签: javascript calendar qualtrics

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

我尝试了各种选项,但仍然可以让我的代码工作 我能否以某种方式引用输入字段并在事件上呈现日历而不是在页面的OnLoad事件上?

下面的图书馆脚本:

    $file_smarty_config = _PS_ROOT_DIR_.'/config/smarty.config.inc.php';
    if (is_file($file_smarty_config)) {
        if (is_writable($file_smarty_config)) {
            $content = Tools::file_get_contents($file_smarty_config);

            if (!strstr($content, 'escapePTS')) {
                $content .= '
                    //CODE MODULES PRESTEAMSHOP - PLEASE NOT REMOVE
                    //--------------------------------------------------------------------------------------------------------
                    smartyRegisterFunction($smarty, "modifier", "escape", "escapePTS");
                    function escapePTS($string, $esc_type = "html", $char_set = null, $double_encode = true, $as_html = false)
                    {
                        $smarty_escape = SMARTY_PLUGINS_DIR."modifier.escape.php";
                        include_once $smarty_escape;

                        if (!$as_html && is_callable("smarty_modifier_escape")) {
                            $string = call_user_func("smarty_modifier_escape", $string, $esc_type, $char_set, $double_encode);
                        }

                        return $string;
                    }
                    //--------------------------------------------------------------------------------------------------------
                ';
                file_put_contents($file_smarty_config, $content);
            }
        }
    }

    $file_uniform = _PS_THEME_DIR_.'js/autoload/15-jquery.uniform-modified.js';
    if (is_file($file_uniform)) {
        if (is_writable($file_uniform)) {
            $content_uniform = Tools::file_get_contents($file_uniform);

            if (!strstr($content_uniform, '.not(".not_unifrom, .not_uniform").uniform();')) {
                $content_uniform = preg_replace(
                    '/'.preg_quote('.uniform();').'/i',
                    '.not(".not_unifrom, .not_uniform").uniform();',
                    $content_uniform
                );

                file_put_contents($file_uniform, $content_uniform);

                rename($file_uniform, _PS_THEME_DIR_.'js/autoload/15-jquery.uniform-modified-pts.js');
            }
        }
    }

我在调查标题中加载以下内容:

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

1 个答案:

答案 0 :(得分: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
相关问题