I currently have a text box and when it is clicked it shows a popup calendar. I also have an image which I want it to show the popup calendar when clicked also, but onClick doesn't seem to work, what am I doing wrong?

How would I do this?

This is what I have regarding the jquery:

$(function() {
    $('#popupDatepicker').datepick();
    $('#inlineDatepicker').datepick({onSelect: showDate});
});

And this is the textbox/image code:

<input type="text" size=15 name=age id="popupDatepicker">
<img src="images/cal.gif" width="16" height="16" border="0" onClick="popupDatepicker"></a>

I currently have a text box and when it is clicked it shows a popup calendar. I also have an image which I want it to show the popup calendar when clicked also, but onClick doesn't seem to work, what am I doing wrong?

How would I do this?

This is what I have regarding the jquery:

$(function() {
    $('#popupDatepicker').datepick();
    $('#inlineDatepicker').datepick({onSelect: showDate});
});

And this is the textbox/image code:

<input type="text" size=15 name=age id="popupDatepicker">
<img src="images/cal.gif" width="16" height="16" border="0" onClick="popupDatepicker"></a>

• javascript
• jquery
• onclick

• I don't know if I'm not right with this, but you're calling a input with id popupDatePicker on your onClick method (and this is working as you said it), but your onClick is calling to the input. Maybe I'm wrong, but you have to create a function to show the datePicker for your img. – David Commented Jan 4, 2017 at 16:41
• What library are you using for .datepick()? Each library has a different method for opening the date-picker programmatically – mhodges Commented Jan 4, 2017 at 16:47

2 Answers 2

You need to bind the click of image to trigger the click on the datepicker too, or to open the datepicker programatically.

Right now your JavaScript code is running on page-load/document-ready not on image click.

HTML:

<input type="text" size=15 name=age id="popupDatepicker">
<img src="images/cal.gif" width="16" height="16" border="0" id="datePickerImage" ></a>

Solution 1:

$(function() {
    $("#datePickerImage").on("click", function(e){
        $('#popupDatepicker').trigger("click");  
    }

});

Solution 2:

$(function() {
    $("#datePickerImage").on("click", function(e){
        $('#popupDatepicker').datepick();
    }
});

The below code works for me:

$(function() {
   $("#id_imgcalendar").on("click", function(e) {
       $('#datepickerfrom').datepicker('show');
   });
});

<input type="text" id="datepickerfrom"/>
<img src="calendar.gif" id="id_imgcalendar" />