jQuery日期选择器与FontAwesome按钮？

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参数中？

- mcography

Answer 1

添加

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

并添加 CSS：

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

点击这里查看JSFiddler参考示例。

- Ankit Sharma

---

谢谢，但那个小工具没有按钮。我尝试在我的JavaScript中添加 buttonText: "<i class='icon-calendar'></i>"，但它不起作用。 - mcography

感谢提供更新的链接。我仍然无法显示图标。在我的CSS中，我放置了.ui-datepicker-trigger { border:none; background: none; } 在我的JavaScript中，我放置了 $(function() { $( "#departureDate" ).datepicker({ showOn: "both", buttonText: "<i class='fa icon-calendar'></i>" }); }); 我做错了什么？ - mcography

我们如何在文本框之前设置日历图标？它现在是在文本框之后添加日历图标。 - Aamir

当我尝试这个时，最终的HTML是：<i class='fa fa-calendar' aria-hidden='true'></i> - Jose Ayram

这个解决方案是否适用于最新的jQuery版本（13）？ - CoreLean

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

- mcography

Answer 3

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

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

- tomaroo

Answer 4

尝试使用.calButton而不是#calButton，因为您已经在按钮上设置了类而不是ID。

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

- Ankit Sharma