Odwołanie do ikony Bootstrap w jQuery Przycisk datepicker Atrybut obrazu?

Question

Jakiej wartości powinienem użyć dla atrybutu datepicker jQuery buttonImage?

Chciałbym użyć ikony kalendarza Bootstrap z datepicker jQuery. Mogę użyć ikona zdjęcie na stronie html, gdy odwołuje się tak:

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

Kiedy używam angular-ui opakowanie ui-date zawinąć datepicker jQuery:

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

ze sterownikiem zdefiniowanie opcji datepicker jak :

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

Jaką wartość powinienem wstawiać dla przycisku "Obrazek"?

Datepicker oczekuje adresu URL obrazu podobnego do tego { buttonImage: "/images/datepicker.gif" }.

Answer 1

Za to, co robią, a nie brudząc z atrybutem buttonImage, polecam Ci wystarczy umieścić ikonę znaczników do TekstNaPrzycisku wartość:

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

Answer 2

Możesz ustawić ikonę w następujący sposób, a następnie przypisać do niej jquery.

jsfiddle 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

wiem, że to późna odpowiedź, ale znalazłem ten artykuł, który robi to samo i z łatwością:

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

i jsFiddle z tego samego artykułu: http://jsfiddle.net/jasenhk/B2txR/

Autor sugeruje użycie atrybutu "for", aby dopasować identyfikator kontrolki wejściowej.

skrzypcach posiada prosty dołączany kontrolę wejściowego:

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

A potem wystarczy zadzwonić datepicker jako:

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