jQuery Datepicker with FontAwesome Button?

Question

I'm building a site with Foundation, and I have the FontAwesome icons installed. I'm trying to set up a form where a user can click on an input or a button to see the jQuery datepicker. I'd like to be able to use the FontAwesome icon in the button. But I can't seem to get the button to trigger the datepicker.

EDIT:

I kind of got it working, but I still can't figure out how to implement the FontAwesome icon. I have this in my HTML:

  <div class="row">
    <div class="large-3 columns">
        <label>Departure Date</label>
        <div class="row date collapse">
        <div class="small-9 columns"><input class="small-9 columns" placeholder="Choose Date" type="text" name="date" id="date"></div>
        </div>
    </div>
  </div>

And this in my JS:

$(function() {
    $( "#date" ).datepicker({
      showOn: "both", 
      buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif",
      buttonText: "THIS IS A BUTTON",
      buttonImageOnly: true
    });
  });

Where do I put the icon? Can I somehow put it in the buttonText argument?

Answer 1

Add

buttonText: "<i class='fa fa-calendar'></i>"

and add CSS:

.ui-datepicker-trigger{
    border:none;
    background:none;
 }

refer JSFiddler Here.