带有FontAwesome按钮的jQuery Datepicker？

Question

我正在使用Foundation构建一个站点,并且我安装了FontAwesome图标.我正在尝试设置一个表单,用户可以单击输入或按钮来查看jQuery日期选择器.我希望能够使用按钮中的FontAwesome图标.但我似乎无法触发按钮来触发日期选择器.

编辑:

我有点工作,但我仍然无法弄清楚如何实现FontAwesome图标.我的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>

这在我的JS中:

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

我在哪里放图标？我能以某种方式把它放在buttonText争论中吗？

Answer 1

加

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

并添加CSS:

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

在这里引用JSFiddler .