Hinzufügen eines benutzerdefinierten Header

Question

pickadate Ich benutze AMsul Pickadate und versuchen, einen benutzerdefinierten Header hinzufügen, indem jquery mit .prepend

Es funktioniert gut, aber wenn ich 2 datapickers auf einer Seite, zum ersten mein benutzerdefinierter Header wird zweimal hinzugefügt, was es lächerlich macht.

Das ist mein js Code:

$.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>'); 
    } 
}); 

Und das ist das Ergebnis, wenn ich 2 datapickers auf einer Seite verwenden:

Mein HTML-Markup wie das aussieht:

<!-- 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"> 

Und ich initialisiere den Pflücker über js:

// Datapicker initialization 
     $('.datepicker').pickadate(); 

Wie kann ich dafür sorgen, dass jedem Datenpicker immer nur ein eigener Header hinzugefügt wird, auch wenn es mehrere gibt?

Answer 1

Die jQuery prepend Methode voranstellen, was Sie es für alle Elemente geben die Wahl passend:

$('.picker__header')

Dies wird prepend sowohl .picker__header s kann es jedes Mal findet sie abgefeuert werden. Indem es in den Render-Callback eingefügt wird, wird es jedes Mal aufgerufen, wenn ein Datepicker gerendert wird. Also zweimal, weil du 2 Datepicker hast.

Die beste Sache wäre, in einem Rückruf, der nur einmal aufgerufen wird, voranzustellen, oder einen Zähler für den Render-Rückruf zu inkrementieren. Etwas wie:

var dateCounter = 0; 

... 

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

Aber es gibt viele Möglichkeiten, dies zu tun. Vielleicht gibt es etwas in der API pickadate.js, die eleganter sein könnte?