jQuery Datepicker mit FontAwesome Button?
-
21-12-2019 - |
Frage
Ich erstelle eine Website mit Foundation und habe die FontAwesome-Symbole installiert.Ich versuche, ein Formular einzurichten, in dem ein Benutzer auf eine Eingabe oder eine Schaltfläche klicken kann, um die jQuery-Datumsauswahl anzuzeigen.Ich möchte das FontAwesome-Symbol in der Schaltfläche verwenden können.Aber ich kann die Schaltfläche zum Auslösen der Datumsauswahl nicht finden.
BEARBEITEN:
Ich habe es einigermaßen zum Laufen gebracht, aber ich weiß immer noch nicht, wie ich das FontAwesome-Symbol implementieren soll.Ich habe dies in meinem 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>
Und das in meinem JS:
$(function() {
$( "#date" ).datepicker({
showOn: "both",
buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif",
buttonText: "THIS IS A BUTTON",
buttonImageOnly: true
});
});
Wo platziere ich das Symbol?Kann ich es irgendwie in die buttonText
Streit?
Lösung
Hinzufügen
buttonText: "<i class='fa fa-calendar'></i>"
und CSS hinzufügen:
.ui-datepicker-trigger{
border:none;
background:none;
}
siehe JSFiddler Hier.
Andere Tipps
Mit der Hilfe von @Ankit oben habe ich es endlich zum Laufen gebracht.Falls jemand anderes versucht, dasselbe zu tun, hier ist der Code, der bei mir funktioniert hat.
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;
}
Die Initialisierung Ihrer Datumsauswahl muss in der Funktion „Dokument bereit“ erfolgen ...
$(function() {
$( "#date" ).datepicker();
$( "#calButton" ).datepicker({
showOn: "both",
});
});
Versuchen .calButton
anstatt #calButton
da Sie die Klasse auf die Schaltfläche und nicht auf die ID gesetzt haben.
$(function() {
$( ".calButton" ).datepicker({
showOn: "both",
});
});