Selection of date and availability in multiple Query datepicker based calendars

Question

I have 3 jQuery datepicker based calendars on the home screen and I just want to use one (new) of them to change those 3 and update the availability of the calendars. Availability is managed with the WordPress plugin Appointment Hour Booking.

On the top datepicker I've a function when it changes that changes the dates of those 3 but doesn't change the availability, just the date. The function is this one:

$( "#date_form" ).datepicker({
    dateFormat:'dd/mm/yy',
    onSelect: function(dateText) {
        $('.fieldCalendarfieldname1_1').datepicker("setDate", this.value );
        $('.fieldCalendarfieldname1_2').datepicker("setDate", this.value );
        $('.fieldCalendarfieldname1_3').datepicker("setDate", this.value );
        alert("Selected date: " + dateText + "; input's current value: " + this.value);
    }
});

Could you help me on updating also the availability?

Answer 1

In your code change this:

$('.fieldCalendarfieldname1_1').datepicker("setDate", this.value );
$('.fieldCalendarfieldname1_2').datepicker("setDate", this.value );
$('.fieldCalendarfieldname1_3').datepicker("setDate", this.value );

...by this:

setDateCal = function(cal, value){
    cal.datepicker("setDate", value);
    var inst = $.datepicker._getInst(cal[0]),
    onSelect = $.datepicker._get(inst, "onSelect");
    if (onSelect) {
        dateStr = $.datepicker._formatDate(inst);
        onSelect.apply((inst.input ? inst.input[0] : null), [dateStr, inst]);
    }
}

setDateCal ($('.fieldCalendarfieldname1_1'),this.value);
setDateCal ($('.fieldCalendarfieldname1_2'),this.value);
setDateCal ($('.fieldCalendarfieldname1_3'),this.value);

That will update both selected date and availability box.