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

datepicker php

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

Answer 1

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 2

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:

<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

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'',

Answer 4

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

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

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.

Answer 5

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

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

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

Answer 6

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:

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

Answer 7

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

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

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.