[英]jQuery Datepicker with FontAwesome Button?
I'm building a site with Foundation, and I have the FontAwesome icons installed. 我正在使用Foundation构建一个站点,并且我安装了FontAwesome图标。 I'm trying to set up a form where a user can click on an input or a button to see the jQuery datepicker.
我正在尝试设置一个表单,用户可以单击输入或按钮来查看jQuery日期选择器。 I'd like to be able to use the FontAwesome icon in the button.
我希望能够使用按钮中的FontAwesome图标。 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. 我有点工作,但我仍然无法弄清楚如何实现FontAwesome图标。 I have this in my HTML:
我的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: 这在我的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? 我能以某种方式将它放在
buttonText
参数中吗?
With the help of @Ankit above, I finally got this working. 在@Ankit的帮助下,我终于得到了这个工作。 In case anyone else is trying to do the same thing, here's the code that worked for me.
如果其他人试图做同样的事情,这里的代码对我有用。
HTML 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 JavaScript的
$(function() {
$( "#departureDate" ).datepicker({
showOn: "both",
buttonText: "<i class='fa fa-calendar'></i>"
});
});
$(function() {
$( "#returnDate" ).datepicker({
showOn: "both",
buttonText: "THIS IS A BUTTON!",
});
});
CSS 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;
}
Your datepicker initialization needs to be in the document ready function... 您的datepicker初始化需要在文档就绪函数中...
$(function() {
$( "#date" ).datepicker();
$( "#calButton" ).datepicker({
showOn: "both",
});
});
Try .calButton
instead of #calButton
since you have set class on button not id. 尝试
.calButton
而不是#calButton
因为你已经在按钮上设置了类而不是id。
$(function() {
$( ".calButton" ).datepicker({
showOn: "both",
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.