0

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

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

1 回答 1

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

这是一个演示相同的小提琴！

于 2015-06-23T17:02:18.233 回答