在輸入字段和圖標上觸發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;它不再適用於編號爲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'); 
      }); 
     });