我使用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个数据选择器时的结果:
javascript - 向自定义标题添加自定义 header-LMLPHP

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


我如何才能使其始终仅向每个数据选择器添加一个自定义标头,即使有多个自定义标头也是如此?

最佳答案

jQuery prepend方法会将您提供给所有与选择器匹配的元素放在前面:

$('.picker__header')

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

最好的办法是在仅调用一次的回调中添加前缀,或者在render回调中增加一个计数器。就像是:

var dateCounter = 0;

...

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


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

10-05 21:04
查看更多