jQueryのdatepicker buttonImage属性内でブートストラップアイコンを参照していますか？

Question

jQueryのdatepicker buttonImage属性にはどのような値を使用する必要がありますか？

jQueryのdatepickerでBootstrapカレンダーアイコンを使用したいと思います。

<i class=icon-calendar></i> 

私はjQueryの日付ピッカーをラップするangular-uiラッパーui-dateを使用する場合：次のように参照するとき、私はHTMLページにアイコン画像を使用することができます

<div class="control-group"> 
     <label class="control-label" for="startDate">Start Date</label> 
     <div class="controls"> 
      <input class="span2" id="startDate" type="text" 
        data-ng-model="formModel.startDate" 
        data-ui-date="formModel.datePickerOptions" 
        data-ng-change="formModel.setAdjustmentDate()" 
        required > 
     </div> 
    </div> 

コントローラとしてDatePickerのオプションを定義すると：

formModel.datePickerOptions = { 
    dateFormat: 'yy-M-dd' 
    ,changeMonth: true 
    ,changeYear: true 
    ,buttonImage: '<i class=icon-calendar></i>' 
    ,buttonImageOnly: true 
    ,showOn: "button" 
}; 

実際にbuttonImageにどのような値を挿入する必要がありますか？

datepickerは、このような画像URLを期待しています{ buttonImage: "/images/datepicker.gif" }。

Answer 1

はちょうどbuttonTextにアイコンマークアップを入れます値

.value('ui.config', { 
    date: { 
     dateFormat : 'mm-dd-yy', 
     minDate : '+1d', 
     showOn  : 'button', 
     buttonText : '<i class="icon-calendar"></i>' 
    } 
}) 

Answer 2

アイコンを次のように配置し、それらにjqueryを割り当てることができます。

jsfiddleあなたがやって、というよりもbuttonImage属性をいじっているものについては、私はあなたをお勧めしますJsfiddle datepicker

<div data-date-format="dd-mm-yyyy" data-date="19-02-2013" id="datepick"class="input-append date"> 
<input type="text" readonly="" value="19-02-2013" size="16" class="span2"> 
    <span class="add-on"><i class="icon-calendar"></i></span> 

<div class="control-group"> 
<label class="control-label" for="inputDatepicker">Datepicker</label> 
<div class="controls"> 
    <div class="input-prepend"> 
     <button class="btn" type="button" id="datepick"><i class="icon-calendar"></i> 
     </button> 
     <input class="span2" id="appendedInputButton" type="text"> 
    </div> 
</div> 

Answer 3

私はこれが返事が遅れているけど、私は同じことを行い、この記事を見つけたし、簡単に：同じ記事から

http://jasenhk.wordpress.com/2013/03/09/jquery-datepicker-with-bootstrap-icon/

とjsFiddle：http://jsfiddle.net/jasenhk/B2txR/

著者は示唆"for"属性を使用して入力コントロールのIDと一致させます。

フィドルは、単純な追加入力コントロールがあります。

<div class="form-horizontal"> 
    <div class="control-group"> 
     <label for="date-picker-2" class="control-label">B</label> 
     <div class="controls"> 
      <div class="input-append"> 
       <input id="date-picker-2" type="text" class="date-picker" /> 
       <label for="date-picker-2" class="add-on"><i class="icon-calendar"></i> 
       </label> 
      </div> 
     </div> 
    </div> 
</div> 

をそして、我々は同じように日付ピッカーを呼び出す必要があります。

$(".date-picker").datepicker();