How to change buttonImage dynamically for single instance?

Question

We are creating multiple instances of datepicker, when selecting particular date from one datepicker that time we need to change the buttonImage of that datepicker instance only not all.

Please refer below code

$('.FixedDates').datepicker({
    showOn: "button",
    buttonImage: "images/HM-Cal-Icon.png",
    buttonImageOnly: true
});

$('.AddDate').click(function () {
    $('.HMDatePicker').append('<br><input type="text" class="FixedDates">');
    $('.FixedDates').datepicker({
              showOn: "button",
              buttonImage: "images/HM-Cal-Icon.png",
              buttonImageOnly: true
    });
});

How to change the buttonImage of current datepicker instead of multiple instance of datepicker

like

$('.FixedDates').datepicker("option", "buttonImage", 'CalendarBlank.jpg');

above code will change the buttonImage for all instance of datepickers. i want to change the current instance of datepicker buttonImage which one actually clicked.

Please find below fiddle link.. http://jsfiddle.net/KN4az/1/

Answer 1

You can change the icon in the onSelect callback, that way only the image for the currently selected datepicker is changed when a date is selected.

There's also the onClose callback for when the datepicker closes, if that's more appropriate

var settings = {
    showOn          : "button",
    buttonImage     : "images/HM-Cal-Icon.png",
    buttonImageOnly : true,
    onSelect        : function() {
        $(this).datepicker("option", "buttonImage", 'CalendarBlank.jpg');
    }
}

$('.FixedDates').datepicker(settings);

$('.AddDate').click(function () {
    $('.HMDatePicker').append('<br><input type="text" class="FixedDates">');
    $('.FixedDates').datepicker(settings);
});

To just change the options for one datepicker at any time, you'll have target it by something unique, for instance the index, which can be done with eq(), which is zero based, so the below would change the icon for the second datepicker with that class

$('.FixedDates').eq(1).datepicker("option", "buttonImage", 'CalendarBlank.jpg');