将自定义标头添加到pickadate

Question

我使用 AMsul Pickadate 并尝试使用 jquery 添加自定义标头 .prepend

它工作正常，但是当我在一个页面上使用 2 个数据选择器时，我的自定义标题被添加到第一个页面两次，这让它看起来很荒谬。

这是我的 js 代码：

    $.extend($.fn.pickadate.defaults, {
    selectMonths: true, // Creates a dropdown to control month
    selectYears: 15, // Creates a dropdown of 15 years to control year,

    onRender: function () {
        var year = $('.datepicker').pickadate('picker').get('highlight', 'yyyy');
        var day = $('.datepicker').pickadate('picker').get('highlight', 'dd');
        var month = $('.datepicker').pickadate('picker').get('highlight', 'mmm');
        var labelday = $('.datepicker').pickadate('picker').get('highlight', 'dddd');
        console.log(year, day, month, labelday);

        $('.picker__header').prepend('<div class="picker__date-display"><div class="picker__weekday-display">' + labelday + '</div><div class="picker__month-display"><div>' + month + '</div></div><div class="picker__day-display"><div>' + day + '</div></div><div    class="picker__year-display"><div>' + year + '</div></div></div>');
    }
});

这是我在一页上使用 2 个数据选择器时的结果：

我的 html 标记如下所示：

<!-- First datapicker-->
        <input placeholder="Selected date" type="text" id="input_from" class="form-control datepicker">

        <!--Second datapicker -->
        <input placeholder="Selected date" type="text" id="input_to" class="form-control datepicker">

我通过 js 初始化选择器：

// Datapicker initialization
        $('.datepicker').pickadate();

我怎样才能让每个数据选择器始终只添加一个自定义标题，即使有多个？

Answer 1

jQuery prepend 方法会将你给它的东西添加到匹配选择器的所有元素：

$('.picker__header')

这将添加到.picker__headers，每次触发时都可以找到它。通过将它放在渲染回调中，每次渲染日期选择器时都会调用它。因此，两次，因为您有 2 个日期选择器。

最好的办法是在只调用一次的回调中预先添加，或者在渲染回调中增加一个计数器。比如：

var dateCounter = 0;

...

onRender: function () {
    dateCounter++;
    if (dateCounter === 2) {
        $('.picker__header').prepend(...
    }
}

但是有很多方法可以做到这一点。也许 pickadate.js API 中有一些更优雅的东西？