javascript - example - Usa JQuery UI Datepicker con íconos del tema Jquery UI
jquery datetimepicker example (10)
Tengo una configuración de control datepicker usando JQuery UI, también estoy usando los temas JQuery UI que proporcionan un conjunto de iconos predeterminados que quiero usar.
El DatePicker permite especificar una imagen específica, es decir:
<script type="text/javascript">
$(document).ready(function() {
$("#DateFrom").datepicker({ showOn: ''button'', buttonImageOnly: true, buttonImage: ''images/ui-icon-calendar.png'' });
});
</script>
Para mostrar un ícono desde el conjunto de iconos, use algo como:
<span class="ui-icon ui-icon-calendar"></span>
¿Hay una forma fácil de integrar los dos o solo tengo que hackear manualmente los estilos / imágenes?
Al seguir la ruta de configurar manualmente un botón / icono, puede usar este ejemplo de Cómo combinar el jogador de icono de jQueryUI DatePicker con los grupos de entrada de Bootstrap 3 para que un evento de clic de JS establezca el foco en el campo de entrada de fecha relevante, desencadenando así la funcionalidad de fecha jQueryUI para aparecer.
O, como lo indica la documentation , puede usar el método show para mostrar el selector de fecha (tenga en cuenta que "Si el marcador de fecha está adjunto a una entrada, la entrada debe estar visible para que se muestre el selector de fecha").
$( ".selector" ).datepicker( "show" );
Esto le permite usar cualquier botón / imagen / icono al lado de un campo de entrada, y puede hacer clic en el botón / imagen / icono para activar la funcionalidad de fecha para el campo de entrada.
La mejor manera sería hacerlo;
Primero use el javascript como ya lo ha usado.
<script type="text/javascript">
$(document).ready(function() {
$("#DateFrom").datepicker({ showOn: ''button'', buttonImageOnly: true, buttonImage: ''images/ui-icon-calendar.png'' });
});
</script>
Luego, agregue el siguiente código CSS;
<style type="text/css">
.ui-datepicker-trigger
{
padding:0px;
padding-left:5px;
vertical-align:baseline;
position:relative;
top:4px;
height:18px;
}
</style>
Este CSS lo ayudará a alinear la imagen del calendario correctamente según lo requiera.
Lo hice funcionar haciendo esto
$("#DateFrom").datepicker({
showOn: ''button''
}).next(''button'').button({
icons: {
primary: ''ui-icon-calendar''
}, text:false
});
Simplemente modifica el botón que se inserta al lado de su entrada para el calendario. Por defecto, lanzan tres elipses en el texto, por lo que también lo elimino.
Me temo que tendrás que hacer eso manualmente. De forma predeterminada, el complemento Datepicker utiliza el siguiente HTML para insertar el buttonImage especificado:
<img title="..." alt="..." src="images/ui-icon-calendar.png" class="ui-datepicker-trigger">
Por cierto, es posible que desee usar ...
$(function() {
// your code here
});
...en lugar de...
$(document).ready(function() {
// your code here
});
Solo un pequeño seguimiento de la respuesta de los Evs ... (¡gran ayuda y gracias Evs!).
Funciona en IE8 también, y agregué CSS para cambiar el cursor en el vuelo estacionario:
button.date-picker-button-hidden:hover
{
cursor: pointer;
}
Sugiero poner la imagen en la entrada
input.date_picker {
text-align: center;
background-image: url("images/ui-icon-calendar.png");
background-position: right center;
background-repeat: no-repeat;
padding-right: 18px;
width: 78px;
}
Me gusta
Utilicé este icono del bonito proyecto de iconos de tango también disponible en png
Ventajas:
- Independiente de javascript
- Se carga al instante con el DOM
- Entradas de fecha futura fáciles de agregar
Tomando prestadas y extendiendo la respuesta de Loktar, podrías intentar algo como esto, nota que solo he probado esto en FF10, pero no veo por qué no funcionaría en otros navegadores.
$(''.date-picker'').datepicker({showOn: ''button''})
.next(''button'').addClass(''date-picker-button-hidden'')
.after($(''<span/>'')
.addClass(''ui-icon'').addClass(''ui-icon-calendar'').addClass(''date-picker-icon''));
Tenga en cuenta que en este ejemplo, date-picker-button-hidden y date-picker-icon son mis propias clases, ya que no me gusta diseñar directamente las clases de jQuery CSS. Aplicar el siguiente CSS:
span.date-picker-icon
{
display: inline-block;
z-index: -1;
position: relative;
left: -16px;
}
button.date-picker-button-hidden
{
opacity: 0.0;
filter: alpha(opacity=0);
height: 16px;
width: 16px;
margin: 0;
padding: 0;
}
Esto efectivamente coloca un ícono jQuery span regular detrás del botón. El botón es completamente transparente / opaco (a través del CSS), sin embargo, debido a que todavía está en la parte superior del icono, al hacer clic en el icono se activa el evento de clic del botón.
Usé este código jquery para obtener un marcador de fecha para un campo de entrada de texto y un ícono de la IU de jquery para que funcione como una imagen en el botón de fechador.
// Apply jQuery UI DatePicker to all controls with class = datepicker
$(''.datepicker'').datepicker({
showWeek: true,
dateFormat: "yy-mm-dd",
buttonImage: "ui-icon-calendar",
regional: "sv",
minDate: "-10Y",
maxDate: "+10Y",
showButtonPanel: true,
buttonImageOnly: false,
showWeekNumber: true,
firstDay: 1,
showOtherMonths: true,
selectOtherMonths: true,
changeMonth: true,
changeYear: true,
showOn: "both"
}).next(''button'').text(''Show calendar'').button({ icons: { primary: ''ui-icon-calendar'' }, text: false });
change: to showOn: "both", // button
<input type="text" name="date_from" id="date_from" />
<input type="text" name="date_to" id="date_to" />
$(function() {
$("#date_from").datepicker({
changeMonth: true,
changeYear: true,
numberOfMonths: 1,
showOn: "both",//button
buttonImageOnly: false,
showAnim: "slideDown",
dateFormat: "yy-mm-dd",
onClose: function(selectedDate) {
$("#date_to").datepicker("option", "minDate", selectedDate);
}
});
$("#date_to").datepicker({
changeMonth: true,
changeYear: true,
numberOfMonths: 1,
showOn: "both",//button
buttonImageOnly: false,
showAnim: "slideDown",
dateFormat: "yy-mm-dd",
onClose: function(selectedDate) {
$("#date_from").datepicker("option", "maxDate", selectedDate);
}
});
});
jqueryui.com/demos/datepicker/#icon-trigger
Se proporciona un muy buen ejemplo con el código de muestra.