Referencing a Bootstrap icon within jQuery datepicker buttonImage attribute?

angular-ui, angularjs, icons, jquery-ui-datepicker, twitter-bootstrap

Solution

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>'
    }
})

Problem

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" }`.

Original source