jQuery DatePicker con botón Fontawesome?
-
21-12-2019 - |
Pregunta
Estoy construyendo un sitio con la Fundación, y tengo los iconos de Fontawesome instalados.Estoy tratando de configurar un formulario donde un usuario puede hacer clic en una entrada o un botón para ver el DatePicker JQUERY.Me gustaría poder usar el icono de Fontawesome en el botón.Pero parece que no puedo obtener el botón para activar el DatePicker.
Editar:
Lo tengo trabajando, pero todavía no puedo averiguar cómo implementar el icono de Fontawesome.Tengo esto en mi 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>
y esto en mi JS:
$(function() {
$( "#date" ).datepicker({
showOn: "both",
buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif",
buttonText: "THIS IS A BUTTON",
buttonImageOnly: true
});
});
¿Dónde pongo el icono?¿Puedo ponerlo en el argumento de buttonText
?
Solución
Agregar
buttonText: "<i class='fa fa-calendar'></i>"
y agregue CSS:
.ui-datepicker-trigger{
border:none;
background:none;
}
Consulte jsfiddler aquí .
Otros consejos
con la ayuda de @ankit arriba, finalmente conseguí este trabajo.En caso de que alguien más esté tratando de hacer lo mismo, aquí está el código que funcionó para mí.
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;
}
La inicialización de DatePicker debe estar en la función de documento listo ...
$(function() {
$( "#date" ).datepicker();
$( "#calButton" ).datepicker({
showOn: "both",
});
});
Intente .calButton
en lugar de #calButton
, ya que ha establecido la clase en el botón no ID.
$(function() {
$( ".calButton" ).datepicker({
showOn: "both",
});
});