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>
Share
Improve this question
edited Jan 4, 2017 at 16:45
mhodges
11.1k2 gold badges31 silver badges48 bronze badges
asked Jan 4, 2017 at 16:37
Zack Antony BucciZack Antony Bucci
6011 gold badge14 silver badges31 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
2 Answers
Reset to default 4You 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" />