jQuery UIにアイコンを追加できないDatepicker

Question

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

これは非常にコードをテストするために、アイコンを生産する以外everthingのために働く、私は、プラグインの初期化後の後の機能を追加しました。

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

はフィドル：http://jsfiddle.net/maniator/D7tKe/

Answer 2

まあ、私はあなたのハックを使用して終了し、それを貼り付ける

$('.ui-datepicker').append('<a href="#">My link</a>');