javascript - 添加自定义 header 到 pickadate

Question

我使用 AMsul Pickadate并尝试使用 jquery .prepend

添加自定义 header

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

这是我的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();

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

Answer 1

jQuery prepend 方法会将您提供的内容添加到与选择器匹配的所有元素之前:

$('.picker__header')

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

最好的办法是在仅调用一次的回调中添加前缀，或者在渲染回调上增加计数器。像这样的东西:

var dateCounter = 0;

...

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

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