Bootstrap Datepicker, Beforeshowday Works After Second Click

I have some issues with beforeShowDay function with bootstrap datepicker. My intention is when I click any day, the 5 days after the selected day must contain the active class. Whe

Solution 1:

I know this is an old question but it's still happening today to bootstrap's datepicker. The reason is that the beforeshowday fires before the changeDate. So every time after you click a new day, the beforeshowday goes first (with the old date) then the changeDate happens afterwards. No matter how I look at it. I feel like this is a bug that they should fix, since the style should work with the new date. Thus the changeDate should go before anything else.

Anyway, the solution is in fact really simple. Just force a update in your changeDate after you change your date, and it will fire the beforeShowDay with the new date. Here is my code snippet as an example:

    $('#datepicker').datepicker({
        inline: true,
        todayHighlight: true,
        beforeShowDay:functionhday(date){
            return (is_pay_day() && day_diff(date)<14 && day_diff(date)>0 ) ?  {classes: 'highlight'} : {} ;
        }
    }).datepicker('setDate', 'today').on("changeDate", function (ev) {
        //set the new date if one is selected
        (!ev.date) ? $(this).datepicker('setDate', selectedDate) : selectedDate = ev.date;
        $('#datepickerInput').val(selectedDate.toDateString());
        //force the update, so the beforeShowDay will be triggered 
        $('#datepicker').datepicker('update',selectedDate);
    });

Solution 2:

After think and search a lot I found a possible solution, If it's effective or not, just tell me, thanks

var selectedDay = newDate().getTime();
$('.datepicker').datepicker({

            beforeShowDay: function (date) {
                var d = date.getTime();
                if (d > selectedDay && d < selectedDay + 1 + 86400000 * 5) {
                    return {classes: 'active'};
                }
            },
            startDate: '0'

        }).on('changeDate', function(e){

            selectedDay = e.date;
            selectedDay = selectedDay.getTime();
            $(".datepicker").data("datepicker").fill();
        });