Use JQuery UI Datepicker con iconos del tema de la interfaz de usuario de Jquery

Question

Tengo una configuración de control de selector de fecha usando la interfaz de usuario de JQuery, también estoy usando los temas de la interfaz de usuario de JQuery que proporcionan un montón 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 del conjunto de íconos, usa algo como:

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

¿Hay alguna forma fácil de integrar las dos o simplemente necesito eliminar los estilos / imágenes manualmente?

Answer 1

Me temo que tendrás que hacerlo 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 utilizar ...

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

... en lugar de ...

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

Answer 2

Lo tengo funcionando haciendo esto

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

Simplemente modifica el botón que inserta junto a su entrada para el calendario. Por defecto, arrojan tres puntos suspensivos en el texto, así 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;
}

Me gusta

Utilicé este icono del símbolo < un proyecto href = "http://commons.wikimedia.org/wiki/Tango_icons"> iconos de tango también está disponible en png

Ventajas:

• Independiente de javascript
• Se carga instantáneamente con el DOM
• Entradas de fecha futura fáciles de agregar

Answer 4

La mejor forma 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>

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 le ayudará a alinear la imagen del calendario correctamente según lo requiera.

Answer 5

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

También funciona en IE8, y agregué CSS para cambiar el cursor al pasar el mouse:

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

Answer 6

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

Se proporciona un muy buen ejemplo con el código de muestra.

Answer 7

Tomando prestado y extendiendo la respuesta de Loktar, podrías intentar algo como esto, ten en cuenta que solo he probado esto en FF10, pero no puedo ver 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 el estilo de jQuery Clases de CSS 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 está colocando efectivamente un ícono regular de jQuery span 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 8

Utilicé este código de jQuery para obtener un selector de fecha para un campo de entrada de texto y un icono de interfaz de usuario de jQuery para funcionar como una imagen en el botón del selector de fecha.

// 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

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

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

Answer 10

Al recorrer la ruta de configuración manual de un botón / icono, puede usar este ejemplo de Cómo combinar el activador de iconos DatePicker jQueryUI con los grupos de entrada de Bootstrap 3 para que un evento de clic JS establezca el foco en la fecha correspondiente campo de entrada, lo que hace que aparezca la funcionalidad de fecha jQueryUI.

O, como indica la documentación , puede utilizar el muestre el método para mostrar el selector de fecha (tenga en cuenta que " Si el selector de fecha se adjunta 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 / ícono al lado de un campo de entrada, y poder hacer clic en el botón / imagen / ícono para activar la funcionalidad de fecha para el campo de entrada.

Answer 11

Conseguí que esto funcionara agregando el HTML para mi botón de icono directamente en la opción buttonText y deshabilitando la opción buttonImage .

$('.datepicker').datepicker({
    showOn: "both",
    buttonText: '<i class="icon-calendar"></i>',
    dateFormat : "DD, MM d"
});