CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap-3datepickerbootstrap-datepicker
Albert Pantoja
Albert Pantoja

Reputation: 11

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.

When the page loads, the function works perfectly. But when I try to choose any other day, I must double click if I want the function to work. The function must work with 1 click. Is something wrong?

var selectedDay = new Date().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(); 
});

Upvotes: 1

Views: 969

Answers (2)

Luyang Du
Luyang Du

Reputation: 180

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:function hday(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);
    });

Upvotes: 3

Albert Pantoja
Albert Pantoja

Reputation: 11

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

var selectedDay = new Date().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();
        });

Upvotes: 0

Related Questions