2

I am using jQuery UI datepicker for my calendar. I have used the beforeShowDay function to block out days which are unavailable. This data comes from an AJAX call which when successful I then populate the calendar.

This works well, however I then want to update the datepicker each time dates become unavailable but I cannot get the datepicker to refresh. I want to be able to call a function e.g. getdates(0); and the datepicker gets updated.

See function code below:

function getdates(duration) {
    $.getJSON(pluginUrl+"ajax/getdates.php?duration="+duration, function( data ) {  

        if(data['success'] == 1){

            console.log("here");
            var nonWorking = data['non_working_days'];
            var nonWorkingDates = data['non_working_dates'];
            var fullyBookedDates = data['fully_booked_dates'];

            jQuery("#datepicker").datepicker({
                minDate: 0,
                maxDate: "+2m",
                beforeShowDay: function(date){
                    var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
                    var day = date.getDay();

                    var status = true;

                    if(nonWorking.indexOf(day) >= 0){
                        var status = false;
                    }
                    if(nonWorkingDates.indexOf(string) >= 0){
                        var status = false;
                    }
                    if(fullyBookedDates.indexOf(string) >= 0){
                        var status = false;
                    }

                    console.log('in here');

                    return [ status ];
                }       
            });

        }

    });
}

Example of the UI:

Datepicker UI

Thanks for any help

Elliot Reeve
  • 901
  • 4
  • 21
  • 39
  • does this jsFiddle help ? http://jsfiddle.net/28NWZ/10/ – Dave Dec 06 '14 at 20:16
  • var dateField = $('#datepicker'); dateField.datepicker('refresh'); should refresh dates in datepicker. – Dave Dec 06 '14 at 20:18
  • @Dave the calendar is shown all the time, not just when an input is in focus. Will add Screenshot of the UI to original post. – Elliot Reeve Dec 06 '14 at 20:24
  • Follow the pattern used in this question: http://stackoverflow.com/questions/9480537/select-only-specific-dates-in-jquery-ui-datepicker-date-list-comes-from-ajax – Salman A Dec 06 '14 at 20:56

1 Answers1

3

Should you reset the datepicker before processing the new data?

jQuery("#datepicker").datepicker( "option" , {
    minDate: null,
    maxDate: null} 
);

Or just destroy it completely and start again:

jQuery("#datepicker").datepicker("destroy");
Sean
  • 14,359
  • 13
  • 74
  • 124