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

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:

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

Pero no ocurre 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.

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

  

Y luego use el atributo buttonImage para su imagen, como lo 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 configuré una display:none tenía display:none estilo, pero eso hizo que el calendario emergiera de la parte superior del navegador, en vez de hacerlo desde donde el usuario hizo clic. Pero el campo oculto funciona como se desee.

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

  

Si está utilizando un campo de entrada y un ícono (como este ejemplo):

   

Puede adjuntar el marcador de fecha 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" ); }); 

Para cambiar “…” cuando el mouse se desplaza sobre el ícono de calendario, debe agregar lo siguiente en las opciones de datepicker:

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

HTML:

 

CÓDIGO:

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

Tener un campo de entrada oculto conduce a 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 “ocúltelo” configurando su opacidad en 0 y haciéndolo 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 presione el botón.

HTML:

   

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 probado con todos los navegadores.

 $(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 este enlace

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

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