在jQuery datepicker buttonImage屬性中引用引導圖標？

我應該爲jQuery datepicker buttonImage屬性使用什麼值？在jQuery datepicker buttonImage屬性中引用引導圖標？

我想使用jQuery datepicker的引導日曆圖標。當這樣的引用，我可以在HTML頁面中使用的圖標圖像：

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

當我使用angular-ui包裝ui-date包裝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>

與控制器定義日期選擇器選項：

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

來源

2013-02-19 Glenn

使用自己的HTML並啓動該按鈕的日期選擇器，或使所有調整與css – charlietfl 2013-02-19 03:43:33

對於你在做什麼，而不是與按鈕畫面屬性搞亂，我建議你只是把圖標標記到buttonText值

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

來源

2013-03-28 22:41:42 koolunix

謝謝你，使用buttonTest取得了訣竅。 – Glenn 2013-03-29 02:17:09

您可以按以下方式排列圖標，並將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>

來源

2013-02-19 04:37:29 Shail

感謝您的答覆。這是做這件事的常規方式，但是這規避了我試圖完成的angularjs綁定。 – Glenn 2013-02-19 22:25:33

我知道這是一個遲到的答覆，但我發現這篇文章它做同樣的事情，並輕鬆：

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

來源

2013-06-25 08:48:27

謝謝你。那是我尋找的那種東西，對未來的嘗試會很有幫助。 – Glenn 2013-06-27 01:58:40

和Bootstrap 3.x示例在這裏：http://jsfiddle.net/jasenhk/4g9u5/ – user1322092 2014-08-02 22:44:26

在jQuery datepicker buttonImage屬性中引用引導圖標？

回答

相關問題