How to highlight dates with jQuery's datepicker

Question

I'm using Jquery UI datepicker to allow a user to fill a date input by selecting a date out of a displayed a calendar.

So far, everything works as expected : http://jsfiddle.net/Aut9b/374/

Then, I wanted to highlight certain dates, to help the user choose, so I looked into the beforeShowDay option which makes that possible.

beforeShowDayType: Function( Date date )

Default: null

A function that takes a date as a parameter and must return an array with:

  [0]: true/false indicating whether or not this date is selectable 
  [1]: a CSS class name to add to the date's cell or "" for the default presentation 
  [2]: an optional popup tooltip for this date

The function is called for each day in the datepicker before it is displayed.

Here is the demo : http://jsfiddle.net/Aut9b/375/

The next step is not only to highlight certain dates but to do it dynamically, based on what the user had previously selected in other inputs (in the same form), so I have used ajax in order to retrieve the dates to highlight

This is my (incomplete) code so far.

$(function() {
    $('.datepicker').datepicker({
        dateFormat : 'yy-mm-dd'
    });
}); 

function fillDates() {
        $('.datepicker').datepicker({
            beforeShowDay: function( date ) {
                var highlight = dates[date];
                if( highlight ) {
                    return [true, 'highlight', highlight];
                } else {
                    return [true, '', ''];
                }
            }
        });
}   

function getDates() {
    $.ajax({    
        type : "POST", 
        dataType: "text",
        url : "ajaxFindDates",
        data : {departure:$('#departure option:selected').val(),
            arrival:$('#arrival option:selected').val()},

        success : function(data) {              
            var dateStr = JSON.parse(data);
            var dates=[];
            for (var i = 0; i < dateStr.length; i++) {
                date=new Date(dateStr[i]);
                dates.push(date);
            }
            fillDates(dates);
        }
            ,
            error : function(data) {
                alert("Problem!" );
            }
        }); 
}

The function getDates() is called when the value of the <select> changes.

I have tried to debug using the browser developer tool and it seems that the function defined in the beforeShowDay is never executed.

Any help will be much appreciated! Thanks.

Answer 1

First of all, when ajax gets in success state, you need to destroy datepicker instance and then create it again in order to trigger beforeShowDay.

You can do it by calling:

$('.datepicker').datepicker('destroy');

Then, you are checking if date exists in your dates array with sush a statement:

var highlight = dates[date];

In other words, you check the key, but when creating dates array you just push() dates to array making simple numeric indexes:

dates.push(date);

If keep it without changes, I think that you will never find them. You should change the way you find elements in array, or the way you add them into the array.

Here is the fiddle. I have mocked ajax request there. Keep in mind that I have also changed the format of the dates recived from the server to mm/dd/yyyy(09/09/2015). With the format that you have provided in your comments, the indexes in final array where not identic.

Answer 2

Your fillDates function doesn't have a dates argument.

function fillDates(dates) {
    $('.datepicker').datepicker({
        beforeShowDay: function( date ) {
            var highlight = dates[date];
            if( highlight ) {
                return [true, 'highlight', highlight];
            } else {
                return [true, '', ''];
            }
        }
    });
} 

Please check your dates array values. It has to be JavaScript date object. I think you don't store it like JavaScript date object.

Can you try this? Please

$(function() {
    $('.datepicker').datepicker({
        dateFormat : 'yy-mm-dd'
    });
}); 

function fillDates() {

        // Please select your specific DOM.
        var datepickerSelect = $('.datepicker').eq(0);

        datepickerSelect.datepicker("destroy").datepicker({
            dateFormat : 'yy-mm-dd',
            beforeShowDay: function( date ) {
                var highlight = dates[date];
                if( highlight ) {
                    return [true, 'highlight', highlight];
                } else {
                    return [true, '', ''];
                }
            }
        });
}   

function getDates() {
    $.ajax({    
        type : "POST", 
        dataType: "text",
        url : "ajaxFindDates",
        data : {departure:$('#departure option:selected').val(),
            arrival:$('#arrival option:selected').val()},

        success : function(data) {              
            var dateStr = JSON.parse(data);
            var dates=[];
            for (var i = 0; i < dateStr.length; i++) {
                date=new Date(dateStr[i]);
                dates.push(date);
            }
            fillDates(dates);
        }
            ,
            error : function(data) {
                alert("Problem!" );
            }
        }); 
}

Answer 3

I have done the changes in your jsfiddle. http://jsfiddle.net/kishoresahas/Aut9b/377/

window.your_dates = [new Date("15-Sep-2015").toString()]
$(function() {
    $('.datepicker').datepicker({
        dateFormat : 'yy-mm-dd',
        beforeShowDay: function(date) {
            // check if date is in your array of dates
            if($.inArray(date.toString(), your_dates)) {
                console.log(your_dates);
                // if it is return the following.
                return [true, 'css-class-to-highlight', 'tooltip text'];
            } else {
                // default
                return [true, '', ''];
            }                                        }
    }); 
});

#highlight, .highlight {
    /*background-color: #000000;*/
}
.css-class-to-highlight > a.ui-state-default {
    background: url("images/ui-bg_highlight-soft_25_ffef8f_1x100.png") repeat-x scroll 50% top #FFEF8F !important;
    border: 1px solid #F9DD34;
    color: #363636;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="input" class="datepicker"/>