Добавление пользовательского заголовка в pickadate

Question

Я использую AMsul Pickadate и попытаться добавить пользовательский заголовок с помощью JQuery .prepend

Он отлично работает, но когда я использую 2 datapickers на одной странице, на первый мой пользовательский заголовок добавляется дважды, что заставляет его выглядеть нелепо.

Это мой 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 datapickers на одной странице:

Мой 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(); 

Как я могу заставить его всегда добавлять только один настраиваемый заголовок для каждого datapicker, даже если есть больше одного?

Answer 1

Метод перед именем JQuery будет предварять то, что вы даете ему все элементы, соответствующих селектор:

$('.picker__header')

Это будет вставляться в обоих .picker__header ы он может найти каждый раз, когда его увольняют. Помещая его в обратный вызов рендеринга, он вызывается для каждого момента отображения дампикера. Дважды, поэтому, потому что у вас есть 2 финалиста.

Лучше всего было бы добавить в обратный вызов, который вызывается только один раз, или увеличивать счетчик обратного вызова рендеринга. Что-то вроде:

var dateCounter = 0; 

... 

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

Но есть много способов сделать это. Может быть, в API pickadate.js есть что-то более элегантное?