在输入字段和图标上触发Pikaday日期选择器脚本 [英] Triggering Pikaday date picker script on input field and icon

问题描述

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

I'm trying to use the Pikaday date picker script and it's working fine, however I want to trigger it on clicking in the field as well as on an icon.

我正在使用 jQuery 方法绑定它，例如:

I am using the jQuery method to bind it, such as:

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

哪个工作正常，但随后我尝试了文档中提到的 trigger 选项.

Which works fine, but then I tried out the trigger option as mentioned in the docs, as such..

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

这也可以，但对具有 used_from_cal id的元素仅 起作用；它不再适用于ID为 used_from 的输入字段.

This works too, but only on the element with the used_from_cal id; it no longer works on the input field with the id used_from.

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

I tried using multiple selectors, such as:

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

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

...but this only worked on the first element.

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

推荐答案

我不认为这是可能的，在Pikaday来源中看到了这一点:

I don't think it's possible out of the box, seeing this in the Pikaday source:

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

只有一个触发器，就是 trigger 或 field .

There's just one trigger, being the trigger or the field.

您可以执行以下操作来破解它:

You can hack your way around it a bit by doing something like:

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

在此处查看: http://codepen.io/anon/pen/MaXBmQ

这篇关于在输入字段和图标上触发Pikaday日期选择器脚本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！