Question

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

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

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

当我使用angular-ui包装器ui-date来包装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选项定义为：

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

我应该为buttonImage插入什么值？

datepicker期待图像网址类似于此{ buttonImage: "/images/datepicker.gif" }。

Answer 1

我知道这是一个迟到的回复，但我发现这篇文章同样轻松地做了同样的事情：

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>

然后我们只需要将datepicker称为：

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

Answer 2

对于你正在做的事情，我推荐你，而不是搞乱buttonImage属性只需将图标标记放入buttonText值

即可

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

Answer 3

您可以按照以下方式排列图标，然后将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>

在jQuery datepicker buttonImage属性中引用Bootstrap图标？

3 个答案: