jQuery datepicker buttonImage 속성 내에서 부트 스트랩 아이콘을 참조 하시겠습니까?

Question

jQuery datepicker buttonImage 속성에는 어떤 값을 사용해야합니까?

부트 스트랩 캘린더 아이콘을 jQuery datepicker와 함께 사용하고 싶습니다. 이 같은 언급 할 때 나는 HTML 페이지에서 아이콘 이미지를 사용할 수 있습니다

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

나는 JQuery와 날짜 선택기 포장하는 angular-ui 래퍼 ui-date를 사용하는 경우 : 같은 날짜 선택기 옵션을 정의하는 컨트롤러와

<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" 
}; 

실제로 buttonImage에 어떤 값을 삽입해야합니까?

datepicker는 이미지 URL이 { buttonImage: "/images/datepicker.gif" } 일 것으로 예상하고 있습니다.

Answer 1

단지 - 버튼으로 아이콘 마크 업을 넣어 값

,210

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