jQuery Datepicker with FontAwesome Button?
Solution 1
Add
buttonText: "<i class='fa fa-calendar'></i>"
and add CSS:
.ui-datepicker-trigger{
border:none;
background:none;
}
refer JSFiddler Here.
Solution 2
With the help of @Ankit above, I finally got this working. In case anyone else is trying to do the same thing, here's the code that worked for me.
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
Mostly I design. Sometimes that involves coding. Also, I would like to say that Stack Overflow is a wonderful resource. I truly appreciate every user who's taken the time to read and answer my questions. You people are great!
Updated on February 05, 2020Comments
-
mcography about 4 years
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.
EDIT:
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>
And this in my 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?