Question

好的，我在页面上有一些输入字段。我需要添加一个datepicker给那些。我必须使用输入字段旁边的小日历图标。

我使用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一样！

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

1 个答案: