具有FontAwesome Button的jQuery Datepicker? [英] jQuery Datepicker with FontAwesome Button?
问题描述
我正在使用Foundation构建站点,并且安装了FontAwesome图标.我正在尝试建立一个表单,用户可以在其中单击输入或按钮以查看jQuery datepicker.我希望能够使用按钮中的FontAwesome图标.但是我似乎无法获得触发日期选择器的按钮.
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.
我有点用,但是我仍然不知道如何实现FontAwesome图标.我的HTML中有这个
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>
这在我的JS中:
$(function() {
$( "#date" ).datepicker({
showOn: "both",
buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif",
buttonText: "THIS IS A BUTTON",
buttonImageOnly: true
});
});
我在哪里放置图标?我可以以某种方式将其放在buttonText
自变量中吗?
Where do I put the icon? Can I somehow put it in the buttonText
argument?
推荐答案
添加
buttonText: "<i class='fa fa-calendar'></i>"
并添加CSS:
.ui-datepicker-trigger{
border:none;
background:none;
}
引用JSFiddler 此处.
refer JSFiddler Here.
这篇关于具有FontAwesome Button的jQuery Datepicker?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!