javascript - 在多个 Pikoday 日历选择器上绑定(bind)触发器

Question

好的，我在页面上有一些输入字段。我需要向其中添加一个日期选择器。我必须使用输入字段本身旁边的小日历图标。

我正在使用 Pikaday 作为我的日历，并且应用了一个触发元素。然而，它似乎不起作用。正如您从下面的代码中看到的，我正在找到相关的 datepicker-button-element，并且我将其用作触发器。

预期结果: 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

我猜您可能对其中一个包含有问题，可能是正在使用旧版本的 pikaday/包含的顺序，因为当我尝试它时它工作正常。另外，由于您知道触发按钮位于输入旁边，因此您可以使用 .next() 选择器。

看一下下面的工作示例。

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

这里是a fiddle to demo一样!