添加自定义 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 中有些东西可能更优雅？

添加自定义 header 到 pickadate

Adding a custom header to pickadate

javascript

jquery

jquery-ui

jquery-plugins

datapicker