Search code examples
javascriptjqueryjquery-uijquery-pluginsdatapicker

Adding a custom header to pickadate

I use AMsul Pickadate and try to add a custom header by using jquery .prepend

It works fine, but when I use 2 datapickers on one page, to the first one my custom header is added twice, what make it looks ridiculous.

This is my 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>');
    }
});

And this is the result when I use 2 datapickers on one page: enter image description here

My html markup looks like that:

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

And I initialize the picker via js:

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

How can I make it to always add only one custom header to each datapicker, even if there is more then one?

Solution

  • The jQuery prepend method will prepend what you give it to all elements matching the selector:

    $('.picker__header')

    This will prepend to both .picker__headers it can find every time it is fired. By putting it in the render callback, it is being called for every time a datepicker is rendered. Twice, therefore, because you have 2 datepickers.

    The best thing would be to prepend in a callback that is only called once, or to increment a counter on the render callback. Something like:

    var dateCounter = 0;

...

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

    But there are lots of ways to do this. Maybe there's something in the pickadate.js API that might be more elegant?