jQuery datepicker buttonImage özniteliğindeki bir Bootstrap simgesine başvurma?

Question

jQuery datepicker buttonImage özniteliği için hangi değeri kullanmalıyım?

BootSrap takvim simgesini jQuery datepicker ile kullanmak istiyorum. Böyle başvurulan zaman html sayfası simge resmini kullanabilirsiniz:

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

jQuery datepicker sarmak için angular-ui sarmalayıcı ui-date kullandığınızda: olarak datepicker seçenekleri tanımlayan kontrolörü ile

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

:

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

Gerçekten buttonImage için hangi değeri ekliyor olmalıyım?

Datepicker, { buttonImage: "/images/datepicker.gif" } gibi bir görüntünün göründüğünü ummaktadır.

Answer 1

sadece ButtonText içine simge biçimlendirmesi koymak değer

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

Answer 2

Yolu aşağıdaki simgeyi düzenlemek ve daha bunlara jquery atayabilirsiniz.

jsfiddle yaptığını ziyade buttonImage özniteliği uğraşıyorsun Ne için, sana tavsiye 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

Bunun bir geç cevap olduğunu biliyorum ama aynı şeyi ve kolaylıkla yapar bu yazıyı buldum: Aynı makaleden

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

ve jsFiddle: http://jsfiddle.net/jasenhk/B2txR/

yazar önerir giriş denetimi kimliğine uyacak "for" özniteliğini kullanarak.

keman basit eklenen giriş kontrolü vardır:

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

Sonra tıpkı datepicker çağırmanız gerekir:

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