Abra JQuery Datepicker haciendo clic en una imagen sin campo de entrada

Question

Quiero tener JQuery Datepicker abierto cuando el usuario hace clic en una imagen. No hay un campo de entrada donde la fecha seleccionada aparece después; Solo voy a guardar la fecha ingresada en el servidor a través de Ajax.

Actualmente tengo este código:

<img src='someimage.gif' id="datepicker" /> 

$(document).ready(function() { 
    $("#datepicker").datepicker({ 
      changeMonth: true, 
      changeYear: true, 
     }).click(function() { $(this).datepicker('show'); }); 
}); 

pero no pasa nada cuando hago clic en la imagen. También he intentado guardar el resultado de la llamada datepicker() a una var global y luego llamar a datepicker ('show') desde el evento onclick() de la imagen, pero el mismo resultado.

Answer 1

Resulta que un simple campo de entrada oculto hace el trabajo:

<input type="hidden" id="dp" /> 

y luego usar el atributo ButtonImage para su imagen, como si fuera normal:

$("#dp").datepicker({ 
     buttonImage: '../images/icon_star.gif', 
     buttonImageOnly: true, 
     changeMonth: true, 
     changeYear: true, 
     showOn: 'both', 
    }); 

Inicialmente probé un campo de entrada de texto y luego establecí un estilo display:none en él, pero eso hizo que el calendario emergiera de la parte superior del navegador, en lugar de que el usuario hiciera clic ked. Pero el campo oculto funciona como se desee.

Answer 2

La documentación de jQuery dice que el datePicker necesita estar conectado a un SPAN o un DIV cuando no está asociado con un cuadro de entrada. Se podría hacer algo como esto:

<img src='someimage.gif' id="datepickerImage" /> 
<div id="datepicker"></div> 

<script type="text/javascript"> 
$(document).ready(function() { 
    $("#datepicker").datepicker({ 
      changeMonth: true, 
      changeYear: true, 
    }) 
    .hide() 
    .click(function() { 
     $(this).hide(); 
    }); 

    $("#datepickerImage").click(function() { 
     $("#datepicker").show(); 
    }); 
}); 
</script> 

Answer 3

HTML:

<div class="CalendarBlock"> 
    <input type="hidden"> 
</div> 

CÓDIGO:

$CalendarBlock=$('.CalendarBlock'); 
$CalendarBlock.click(function(){ 
    var $datepicker=$(this).find('input'); 
    datepicker.datepicker({dateFormat: 'mm/dd/yy'}); 
    $datepicker.focus(); }); 

Answer 4

Si está utilizando un campo de entrada y un icono (como en este ejemplo):

<input name="hasta" id="Hasta" type="text" readonly /> 
<a href="#" id="Hasta_icono" ></a> 

se puede conectar el selector de fechas a su icono (en mi caso dentro de la etiqueta A a través de CSS) de esta manera:

$("#Hasta").datepicker(); 
    $("#Hasta_icono").click(function() { 
    $("#Hasta").datepicker("show"); 
    }); 

Answer 5

Para cambiar el "..." cuando se pasa el ratón sobre el icono de calendario, es necesario agregar lo siguiente en las opciones datepicker:

showOn: 'button', 
    buttonText: 'Click to show the calendar', 
    buttonImageOnly: true, 
    buttonImage: 'images/cal2.png', 

Answer 6

$(function() { 
    $("#datepicker").datepicker({ 
     //showOn: both - datepicker will come clicking the input box as well as the calendar icon 
     //showOn: button - datepicker will come only clicking the calendar icon 
     showOn: 'button', 
     //you can use your local path also eg. buttonImage: 'images/x_office_calendar.png' 
     buttonImage: 'http://theonlytutorials.com/demo/x_office_calendar.png', 
     buttonImageOnly: true, 
     changeMonth: true, 
     changeYear: true, 
     showAnim: 'slideDown', 
     duration: 'fast', 
     dateFormat: 'dd-mm-yy' 
    }); 
}); 

El código anterior pertenece a this link

Answer 7

Tener un campo de entrada oculto genera problemas con el posicionamiento del diálogo datepicker (el diálogo se centra horizontalmente). Puedes alterar el margen del diálogo, pero hay una mejor manera.

Simplemente cree un campo de entrada y "escóndelo" configurando su opacidad en 0 y haciéndola de 1px de ancho. También colóquelo cerca (o debajo) del botón, o donde quiera que aparezca el marcador de fecha.

A continuación, conecte el marcador de fecha al campo de entrada "oculto" y muéstrelo cuando el usuario presiona el botón.

HTML:

<button id="date-button">Show Calendar</button> 
<input type="text" name="date-field" id="date-field" value=""> 

CSS:

#date-button { 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: 2; 
    height 30px; 
} 

#date-field { 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: 1; 
    width: 1px; 
    height: 32px; // height of the button + a little margin 
    opacity: 0; 
} 

JS:

$(function() { 
    $('#date-field').datepicker(); 

    $('#date-button').on('click', function() { 
     $('#date-field').datepicker('show'); 
    }); 
}); 

Nota: no se ha probado con todos los navegadores.

Answer 8

<img src='someimage.gif' id="datepicker" /> 
<input type="hidden" id="dp" /> 

$(document).on("click", "#datepicker", function() { 
    $("#dp").datepicker({ 
    dateFormat: 'dd-mm-yy', 
    minDate: 'today'}).datepicker("show"); 
    }); 

que acaba de añadir el código para hacer clic en la imagen o cualquier otro evento html etiqueta de clic. Esto se hace iniciando la función datepicker cuando hacemos clic en el disparador.