添加自定义标头以进行选择

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__header前面。通过将它放在渲染回调中，每次渲染一个日期选择器时都会调用它。因此，两次，因为你有2个日期选择器。

最好的方法是在一个只调用一次的回调中添加，或者在渲染回调中增加一个计数器。类似的东西：

var dateCounter = 0;

...

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

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