Usar JQuery UI Datepicker con íconos de Jquery UI Theme

Question

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.

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 icono desde el icono set que se utiliza algo como:

<span class="ui-icon ui-icon-calendar"></span> 

¿Hay una forma fácil de integrar los dos ¿o solo necesito piratear manualmente los estilos/imágenes?

Answer 1

Me temo que tendrás que hacer eso manualmente. Por defecto, el plugin selector de fechas utiliza el siguiente código HTML para insertar el buttonImage especificada:

<img title="..." alt="..." src="images/ui-icon-calendar.png" class="ui-datepicker-trigger"> 

Por cierto, es posible que desee utilizar ...

$(function() { 
// your code here 
}); 

... en lugar de ...

$(document).ready(function() { 
// your code here 
}); 

Answer 2

lo tengo trabajo por hacer esto

$("#DateFrom").datepicker({ 
    showOn: 'button' 
}).next('button').button({ 
    icons: { 
     primary: 'ui-icon-calendar' 
    }, text:false 
}); 

Simplemente modifica el botón que se inserta junto a su entrada para el calendario. Por defecto, lanzan tres elipses en el texto, por lo que también lo elimino.

Answer 3

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; 
} 

Como

Solía ​​this icon del proyecto agradable tango icons también disponible en png

Ventajas:

• Independiente de JavaScript
• cargas al instante con los DOM
• entradas fecha futura fácil de añadir

Answer 4

http://jqueryui.com/demos/datepicker/#icon-trigger

Un muy buen ejemplo con el código de ejemplo se proporciona.

Answer 5

Tomando prestada y extendiendo la respuesta de Loktar, podría intentar algo como esto, tenga en cuenta 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, selector de fecha de botón oculto- y selector de fecha-icono son mis propias clases, ya que no me gusta peinar las clases CSS jQuery directamente. Aplique 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.

Answer 6

Solo un pequeño seguimiento a la respuesta de Evs ... (¡gran ayuda y gracias Evs!).

Funciona en IE8 también, y añadió CSS ​​para cambiar el cursor sobre el elemento emergente:

button.date-picker-button-hidden:hover 
{ 
    cursor: pointer; 
} 

Answer 7

La mejor manera sería;

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> 

A continuación, 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.

Answer 8

Utilicé este código de jquery para obtener un datepicker para un campo de entrada de texto y un icono de jQry UI para que funcione como una imagen en el botón datepicker.

// 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 }); 

Answer 9

cambio: a showOn: botón de "ambos", //

<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); 
    } 
}); 
}); 

http://jsfiddle.net/wimarbueno/fpT6q/

Answer 10

En la ruta que va de configurar manualmente un botón/icono, puede utilizar este ejemplo de How to combine the jQueryUI DatePicker's Icon Trigger with Bootstrap 3's Input Groups para tener un evento de clic de JS, establezca el foco en el campo de entrada de fecha relevante, desencadenando así la aparición de la funcionalidad de fecha de jQueryUI.

O, como los documentation estados, puede utilizar el método show para mostrar el selector de fechas (tenga en cuenta que "Si el selector de fechas se une a una entrada, la entrada debe ser visible para el que se muestra el selector de fechas.").

$(".selector").datepicker("show");

Esto le permite utilizar cualquier botón/imagen/icono al lado de un campo de entrada, y ser capaz de hacer clic en el botón/imagen/icono para activar la funcionalidad de fecha para el campo de entrada.