Open JQuery Datepicker by clicking on an image w/ no input field

Question

I want to have the JQuery Datepicker open when the user clicks on an image. There is no input field where the selected date appears afterwards; I'm just going to save the entered date to the server via Ajax.

Currently I have this code:

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

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

But nothing happens when I click on the image. I have also tried saving the result of the datepicker() call to a global var and then calling datepicker('show') from the onclick() event of the image, but same result.

Answer 1

The jQuery documentation says that the datePicker needs to be attached to a SPAN or a DIV when it is not associated with an input box. You could do something like this:

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

Turns out that a simple hidden input field does the job:

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

And then use the buttonImage attribute for your image, like normal:

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

Initially I tried a text input field and then set a display:none style on it, but that caused the calendar to emerge from the top of the browser, rather than from where the user clicked. But the hidden field works as desired.

Answer 3

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

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

Answer 4

Hi ,

I am also looking for the same functioanlity with datepicker. I tried both solutions given in this post, but none of those worked for me. can you plese let me know if this solutions worked for you if not did you find any other solution?

Thanks

Answer 5

If you are using an input field and an icon (like this example):

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

You can attach the datepicker to your icon (in my case inside the A tag via CSS) like this:

$("#Hasta").datepicker();

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