javascript - 在输入字段和图标上触发 Pikaday 日期选择器脚本

Question

我正在尝试使用Pikaday日期选择器脚本，它工作正常，但是我想在单击字段和图标时触发它。

我是用jQuery方法绑定的，比如：

var picker = new Pikaday({
    field: $('#used_from')[0]
});

哪个工作正常，但后来我尝试了文档中提到的触发选项，因此..

var picker = new Pikaday({
    field: $('#used_from')[0],
    trigger: $('#used_from_cal')[0],
});

这也适用，但仅适用used_from_cal于具有id的元素；它不再适用于 id 的输入字段used_from。

我尝试使用多个选择器，例如：

var picker = new Pikaday({
    field: $('#used_from, #used_from_calc')[0]
});

...但这仅适用于第一个元素。

CodePen： http ://codepen.io/anon/pen/RWJyQL

Answer 1

我认为开箱即用是不可能的，在 Pikaday 来源中看到了这一点：

opts.trigger = (opts.trigger && opts.trigger.nodeName) ? opts.trigger : opts.field;

只有一个触发器，即trigger或field。

您可以通过执行以下操作来破解它：

  document.getElementById("used_from_cal").addEventListener("click", function(){
    picker.show();
  });

在这里查看：http: //codepen.io/anon/pen/MaXBmQ

Answer 2

我知道这不是正确的方法，但也许会对您有所帮助。

 $(document).ready(function($) {
          var picker = new Pikaday({
            field: $('#used_from')[0]
          });

          $('#used_from_cal').click(function() {
           $('.pika-single.is-bound').removeClass('is-hidden'); 
           $('.pika-single.is-bound').css('position', 'absolute');
           $('.pika-single.is-bound').css('position', '36px');
           $('.pika-single.is-bound').css('left', '10px');
          });
      });