Tham chiếu biểu tượng Bootstrap trong thuộc tính buttonPage của jQuery datepicker?

Question

Tôi nên sử dụng giá trị nào cho thuộc tính datepicker jQuery buttonImage?

Tôi muốn sử dụng biểu tượng lịch Bootstrap với trình đặt ngày tháng của jQuery. Tôi có thể sử dụng các hình ảnh biểu tượng trong trang html khi tham chiếu như thế này:

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

Khi tôi sử dụng angular-ui wrapper ui-date để quấn 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> 

với bộ điều khiển xác định các tùy chọn datepicker như :

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

Giá trị nào tôi thực sự nên chèn cho buttonImage?

Máy ghi ngày mong đợi url hình ảnh giống như thế này { buttonImage: "/images/datepicker.gif" }.

Answer 1

Đối với những gì bạn đang làm, chứ không phải can thiệp vào thuộc tính buttonImage, tôi khuyên bạn chỉ cần đặt đánh dấu biểu tượng vào buttonText giá trị

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

Answer 2

Bạn có thể sắp xếp biểu tượng theo cách sau và gán jquery cho chúng.

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

Tôi biết đây là bài trả lời muộn, nhưng tôi tìm thấy bài viết này mà làm điều tương tự và dễ dàng:

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

và jsFiddle so với cùng bài viết: http://jsfiddle.net/jasenhk/B2txR/

Tác giả đề nghị sử dụng thuộc tính "for" để khớp với id của điều khiển đầu vào.

Các fiddle có một đơn giản kiểm soát đầu vào nối:

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

Và sau đó chúng ta chỉ cần gọi datepicker như:

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