Fare riferimento a un'icona Bootstrap all'interno del pulsante jQuery datepickerImage attributo?

Question

Quale valore devo usare per l'attributo jQuery datepicker buttonImage?

Vorrei utilizzare l'icona del calendario Bootstrap con jQuery datepicker. Posso usare l'immagine icona nella pagina html in cui si fa riferimento in questo modo:

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

Quando uso il angular-ui involucro ui-date per avvolgere il 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> 

con il controller definizione delle opzioni DatePicker come :

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

Quale valore dovrei essere effettivamente utilizzando per la buttonImage?

Il datapicker si aspetta un url immagine simile a questo { buttonImage: "/images/datepicker.gif" }.

Answer 1

Per quello che si sta facendo, piuttosto che pasticciano con l'attributo buttonImage, vi consiglio appena messo l'icona markup nel buttonText valore

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

Answer 2

È possibile disporre l'icona nel modo seguente e di assegnargli 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

So che questa è una risposta in ritardo, ma ho trovato questo articolo che fa la stessa cosa e con facilità:

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

e jsFiddle dallo stesso articolo: http://jsfiddle.net/jasenhk/B2txR/

L'autore suggerisce usando l'attributo "for" per abbinare l'id del controllo di input.

Il violino ha un semplice controllo di input aggiunto:

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

E poi abbiamo solo bisogno di chiamare datepicker come:

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