javascript - 如何为单个实例动态更改 buttonImage？

Question

我们正在创建日期选择器的多个实例，当从一个日期选择器中选择特定日期时，我们只需要更改该日期选择器实例的 buttonImage全部。

请引用下面的代码

$('.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
    });
});

如何更改当前日期选择器的按钮图像而不是日期选择器的多个实例

喜欢

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

以上代码将更改所有日期选择器实例的按钮图像。我想更改实际点击的 datepicker buttonImage 的当前实例。

请在下面找到 fiddle 链接.. http://jsfiddle.net/KN4az/1/

Answer 1

您可以在 onSelect 回调中更改图标，这样在选择日期时只会更改当前所选日期选择器的图像。

如果更合适的话，还有用于日期选择器关闭时的 onClose 回调

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);
});

要随时更改一个日期选择器的选项，您可以通过一些独特的东西来定位它，例如索引，这可以通过 eq() 来完成，它是基于零的, 因此下面将更改具有该类的第二个日期选择器的图标

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