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

Question

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

我是用jQuery方式绑定的，如：

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

效果很好，但后来我尝试了文档中提到的 trigger 选项，因此..

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

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

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

Answer 2

我认为开箱即用是不可能的，在 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

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

Triggering Pikaday date picker script on input field and icon

javascript

jquery

datepicker

pikaday