在多个 Pikoday 日历选择器上绑定触发器

Question

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

我在我的日历中使用 Pikaday，其中一个应用了触发元素。但是，它似乎不起作用。正如您从我下面的代码中看到的那样，我找到了相关的日期选择器按钮元素，并将其用作我的触发器。

预期结果： 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 正在 used/the 包含顺序，因为我尝试它时它工作正常。此外，由于您知道触发按钮就在输入旁边，因此您可以使用 .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一样的！

在多个 Pikoday 日历选择器上绑定触发器

Binding trigger on multiple Pikoday calendar pickers

javascript

jquery

calendar

datepicker

pikaday