javascript - 无法将图标附加到 jQuery UI Datepicker

Question

我正在为 jQuery UI 日期选择器插件创建一个扩展插件，主要是为了标准化所使用的选项，以及添加一个图标来打开日历。我知道该插件使用了图标触发器，但这不会起作用，因为我在我的 sprite 图像中使用了一个图标，并且不想额外请求一个图标。

我的插件代码:

(function($) {
    $.extend($.fn, {
        DatePicker: function() {
            return this.each(function() {
                $(this).datepicker({
                    showOtherMonths: true,
                    selectOtherMonths: true
                }).after(
                    $("<a/>", { "href": "javascript:void(0)", "class": "icon-calendar", "text": "select date" }).click(function() {
                        $(this).prev("input").datepicker("show")
                    })
                )
            })
        }
    })
})(jQuery);

除了生成图标外，这对所有其他地方都有效，所以为了测试代码，我在插件初始化后添加了 after 函数。

$(".date").DatePicker().after(
    $("<a/>", { "href": "javascript:void(0)", "class": "icon-calendar", "text": "select date" }).click(function() {
        $(this).prev("input").datepicker("show")
    })
)

这是真正让我感到困惑的地方，因为这段代码确实可以生成日历图标。虽然我可以让它以这种方式工作，但它显然不是更好的选择，因为它应该是扩展插件的一部分，而不是在我的所有插件的各种实现中重复出现。

Answer 1

将此添加到 .datepicker({...

        showOn: "button",
        buttonImage: "images/calendar.gif",
        buttonImageOnly: true

所以:

$.extend($.fn, {
    DatePicker: function() {
        return this.each(function() {
            $(this).datepicker({
                showOtherMonths: true,
                selectOtherMonths: true,
                showOn: "button",
                buttonImage: "images/calendar.gif",
                buttonImageOnly: true
            });
        });
    }
});

fiddle :http://jsfiddle.net/maniator/D7tKe/