Search code examples
javascriptjquerydatepickerpikaday

Triggering Pikaday date picker script on input field and icon


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.

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

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

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],
});

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


Solution

  • 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;
    

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

    Check it out here: http://codepen.io/anon/pen/MaXBmQ