사용자 정의 헤더 내가 AMsul <a href="http://amsul.ca/pickadate.js/" rel="nofollow noreferrer">Pickadate</a> 사용

Question

을 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(); 

하나 이상의 사용자 정의 헤더가있는 경우에도 각 데이터 피커에 항상 하나의 맞춤 헤더 만 추가하도록하려면 어떻게해야합니까?

Answer 1

JQuery와 앞에 추가 방법은 당신이 선택 일치하는 모든 요소에게 줄 것을 앞에 추가됩니다

$('.picker__header')

이 그것이 발사 될 때마다 찾을 수 s의 두 .picker__header에 앞에 추가됩니다. 렌더 콜백에 두는 것으로 datepicker가 렌더링 될 때마다 호출됩니다. 2 번 데이트 피커가 있기 때문에 두 번.

가장 좋은 방법은 한 번만 호출되는 콜백 앞에 추가하거나 렌더링 콜백의 카운터를 증가시키는 것입니다. 예 :

var dateCounter = 0; 

... 

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

하지만 이렇게하는 방법은 다양합니다. pickadate.js API에는 좀 더 우아할만한 것이 있을까요?