javascript - Open Datepicker on Image Click with jQuery - Stack Overflow

admin管理员组

文章数量:1321051

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

Share Improve this question Follow edited Jan 4, 2017 at 16:45 mhodges 11.1k22 gold badges3131 silver badges4848 bronze badges asked Jan 4, 2017 at 16:37 Zack Antony BucciZack Antony Bucci 60111 gold badge1414 silver badges3131 bronze badges 2

• 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

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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();
    }
});

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

本文标签： javascriptOpen Datepicker on Image Click with jQueryStack Overflow