Невозможно добавить значок в JQuery UI Datepicker - PullRequest
Новая
       13

Невозможно добавить значок в JQuery UI Datepicker

2 голосов
/ 12 июля 2011

Я создаю плагин расширения для плагина JQuery UI Date Picker, в основном, чтобы просто стандартизировать используемые параметры, а также добавить значок для открытия календаря.Мне известно о том, что плагин использует триггер значков, но это не сработает, поскольку я использую значок в своем изображении спрайта и не хочу дополнительного запроса простой иконки.

Мой код плагина: 

(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")
    })
)

Это то, где это действительно сбивает с толкумне, как этот код работает, чтобы произвести значок календаря.хотя я мог бы заставить его работать таким образом, это, очевидно, не лучший выбор, так как он должен быть частью плагина расширения и не повторяться во всех моих различных реализациях плагина.

Ответы [ 2 ]

0 голосов
/ 12 июля 2011

Попробуйте 

$('.ui-datepicker').append('<a href="#">My link</a>');
0 голосов
/ 12 июля 2011

Добавьте это к .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/

...