Question

我们正在创建多个datepicker实例，当从一个日期选择器中选择特定日期时，我们需要更改该datepicker实例的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
    });
});

如何更改当前datepicker的buttonImage而不是datepicker的多个实例

像

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

上面的代码将更改所有datepickers实例的buttonImage。我想更改当前实际点击的datepicker buttonImage的当前实例。

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

Answer 1

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

当datepicker关闭时，还有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');

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

1 个答案: