Open Datepicker on Image Click with jQuery

Question

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 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
– 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
– mhodges, Commented Jan 4, 2017 at 16:47

Aditya Singh · Accepted Answer · 2017-01-04 16:51:47Z

4

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

answered Jan 4, 2017 at 16:51

Aditya Singh

1165 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Alex M · Accepted Answer · 2017-09-21 11:15:45Z

3

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" />

edited Sep 21, 2017 at 11:15

Alex M

2,8467 gold badges31 silver badges36 bronze badges

answered Sep 21, 2017 at 11:10

Samudra Gupta

311 bronze badge

Collectives™ on Stack Overflow

Open Datepicker on Image Click with jQuery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related