[英]jQuery Datepicker with FontAwesome Button?
我正在使用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
参数中吗?
加
buttonText: "<i class='fa fa-calendar'></i>"
并添加CSS:
.ui-datepicker-trigger{
border:none;
background:none;
}
在这里引用JSFiddler。
在@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;
}
您的datepicker初始化需要在文档就绪函数中...
$(function() {
$( "#date" ).datepicker();
$( "#calButton" ).datepicker({
showOn: "both",
});
});
尝试.calButton
而不是#calButton
因为你已经在按钮上设置了类而不是id。
$(function() {
$( ".calButton" ).datepicker({
showOn: "both",
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.