带有 FontAwesome 按钮的 jQuery Datepicker？答案

【问题标题】：jQuery Datepicker with FontAwesome Button?带有 FontAwesome 按钮的 jQuery Datepicker？
【发布时间】：2014-07-24 00:52:19
【问题描述】：

我正在使用 Foundation 构建一个站点，并且安装了 FontAwesome 图标。我正在尝试设置一个表单，用户可以在其中单击输入或按钮以查看 jQuery datepicker。我希望能够使用按钮中的 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 参数中吗？

【问题讨论】：

标签： javascript jquery-ui datepicker jquery-ui-datepicker font-awesome

【解决方案1】：

添加

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

并添加 CSS：

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

请参考 JSFiddler Here。

【讨论】：

谢谢，但那个小提琴没有按钮。我尝试将 buttonText: "<i class='icon-calendar'></i>" 放入我的 JavaScript，但它不起作用。
感谢更新链接。我仍然无法显示图标。在我的 CSS 中，我输入了 .ui-datepicker-trigger { border:none; background: none; } 在我的 JavaScript 中，我输入了 $(function() { $( "#departureDate" ).datepicker({ showOn: "both", buttonText: "<i class='fa icon-calendar'></i>" }); }); 我做错了什么？
它在小提琴中有效，但在我的网站上无效。这是否意味着某些 CSS 正在干扰？
是的，您必须使用 css 类，fa fa-calendar，很高兴知道，您终于可以正常工作了，您能否标记它为答案。谢谢。
如何在文本框前设置日历图标...？？它在文本框后添加日历图标。

【解决方案2】：

在上面@Ankit 的帮助下，我终于搞定了。如果其他人尝试做同样的事情，下面是对我有用的代码。

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="departureDate"></div>
        </div>
    </div>
  </div>

  <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="returnDate"></div>
        </div>
    </div>
  </div>

JavaScript

$(function() {
    $( "#departureDate" ).datepicker({
      showOn: "both", 
      buttonText: "<i class='fa fa-calendar'></i>"
    });
  });

$(function() {
    $( "#returnDate" ).datepicker({
      showOn: "both", 
      buttonText: "THIS IS A BUTTON!",
    });
  });

CSS

/* Datepicker Styles */

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

input.small-9.columns.hasDatepicker {
    float: left;
    width: 73%;
}

button.ui-datepicker-trigger {
    background: #FFF;
    color: #333;
    padding: 9px 14px;
}

button.ui-datepicker-trigger:hover {
    background: #CCC;
}

button.ui-datepicker-trigger i.fa.icon-calendar {
    color: black;
}

【讨论】：

【解决方案3】：

您的日期选择器初始化需要在文档就绪函数中...

$(function() {
    $( "#date" ).datepicker();
    $( "#calButton" ).datepicker({
      showOn: "both", 
    });
});

【讨论】：

【解决方案4】：

尝试.calButton 而不是#calButton，因为您在按钮上设置了类而不是id。

$(function() {
    $( ".calButton" ).datepicker({
        showOn: "both", 
    });
});

【讨论】：