Binding trigger on multiple Pikoday calendar pickers

Question

Okay, so I have some input fields on a page. I need to add a datepicker to those. And I have to use the tiny calendar icon next to the input field itself.

Im using Pikaday for my calendar, and one apply a trigger element. However, it doesn't seem to work. As you can see from my code below, I'm finding the relevant datepicker-button-element, and I'm using that as my trigger.

Expected result: http://dbushell.github.io/Pikaday/examples/trigger.html

HTML:

<div class="datepicker-able">
    <input type="text" class="datepicker number1"> 
     <a href="#" class="datepicker-button">button1</a>
</div>

<div class="datepicker-able">
    <input type="text" class="datepicker number2"> 
     <span class="datepicker-button">button2</a>
</div>

Javascript:

$(document).ready(function() {
    $('.datepicker').each(function(index, element) {
        $(element).pikaday({
            field: element,
            trigger: $(element).closest('div').find('.datepicker-button').get(0), // <<<<
            firstDay: 1,
            //position: 'top right',
            minDate: new Date('1900-01-01'),
            maxDate: new Date('2015-10-15'),
            format: 'DD.MM.YYYY',
            defaultDate: new Date('1980-01-01'),
            yearRange: [1900,2020],
        });
    });
});

Answer 1

I am guessing you may have problems with one of the includes, may be an old version of pikaday is being used/the order of includes as it works fine when I try it. Also, since you know that the trigger button is right next to the input, you may use the .next() selector.

Take a look at the working example below.

$(document).ready(function() {
    $('.datepicker').each(function(index, element) {
        $(element).pikaday({
            field: element,
            trigger: $(element).next('.datepicker-button')[0],
            firstDay: 1,
            //position: 'top right',
            minDate: new Date('1900-01-01'),
            maxDate: new Date('2015-10-15'),
            format: 'DD.MM.YYYY',
            defaultDate: new Date('1980-01-01'),
            yearRange: [1900,2020],
        });
    });
});

Here is a fiddle to demo the same!