Referencing a Bootstrap icon within jQuery datepicker buttonImage attribute?

Question

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

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>

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>

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

What value should I actually be inserting for the buttonImage?

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

Answer 1

I know this is a late reply, but I found this article which does the same thing and with ease:

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

and jsFiddle from the same article: http://jsfiddle.net/jasenhk/B2txR/

The author suggests using the "for" attribute to match the id of the input control.

The fiddle has a simple appended input control:

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

And then we just need to call datepicker as:

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