Question

我正在尝试使用http://codepen.io/anon/pen/RWJyQL日期选择器脚本，但它运行正常，但是我想在点击字段和图标时触发它。

我使用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的元素上;它不再适用于标识为used_from的输入字段。

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

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

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

CodePen： Animate image icon from touch place to right-top corner?

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');
          });
      });

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

2 个答案: