在jQuery datepicker buttonImage属性中引用Bootstrap图标？ [英] Referencing a Bootstrap icon within jQuery datepicker buttonImage attribute?

问题描述

我应该为jQuery datepicker buttonImage 属性使用什么值？

What value should I be using for the jQuery datepicker buttonImage attribute?

我想使用带有jQuery datepicker的Bootstrap日历图标。当我这样引用时，我可以使用html页面中的图标图像：

I would like to use the Bootstrap calendar icon with the jQuery datepicker. I can use the icon image in the html page when referenced like this:

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

当我使用 angular-ui 包装器 ui-date 包装jQuery datepicker：

When I use the angular-ui wrapper ui-date to wrap the jQuery datepicker:

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

控制器将datepicker选项定义为：

with the controller defining the datepicker options as:

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

我应该为buttonImage插入什么值？

What value should I actually be inserting for the buttonImage?

datepicker期待一个像这样的图像URL {buttonImage：/ images / datepicker.gif} 。

The datepicker is expecting an image url something like this { buttonImage: "/images/datepicker.gif" }.

推荐答案

对于你在做什么，而不是搞乱buttonImage属性，我建议你
只需要放置图标标记到buttonText值

For what you are doing, rather than messing with the buttonImage attribute, I recommend you just put the icon markup into the buttonText value

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

这篇关于在jQuery datepicker buttonImage属性中引用Bootstrap图标？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！