asked on datepicker - prevent a textbox click from invoking the pop-up calendar
I have a datepicker control that is implemented via jQuery.
When you click on the text box control OR the calander icon image, the calendar pops up.
I want to make it so that ONLY the calendar icon image is clickable. Clicking on the text box should NOT invoke the calendar popup.
I tried setting "disabled" to true on mouseenter, but then I don't seem to be able to click the calendar image icon when I do that.
Here is a jsfiddle:
Sample 1:
date picker popup
Sample 2:
Here is the control as it currently functions
Notice that in Sample 2, clicking on the "clear" command DOES clear out the value of the input tag, but then for some reason the calendar pop up invokes. I don't want the calendar to pop-up. I just want to clear the text input value.
But when I click elsewhere to make the calendar pop up go away -- the date value comes back!!!!
When you click on the text box control OR the calander icon image, the calendar pops up.
I want to make it so that ONLY the calendar icon image is clickable. Clicking on the text box should NOT invoke the calendar popup.
I tried setting "disabled" to true on mouseenter, but then I don't seem to be able to click the calendar image icon when I do that.
Here is a jsfiddle:
Sample 1:
date picker popup
Sample 2:
Here is the control as it currently functions
Notice that in Sample 2, clicking on the "clear" command DOES clear out the value of the input tag, but then for some reason the calendar pop up invokes. I don't want the calendar to pop-up. I just want to clear the text input value.
But when I click elsewhere to make the calendar pop up go away -- the date value comes back!!!!
jQueryCSSJavaScript
Last Comment
Tom Knowlton
Can you share what your end goal is with preventing the pop up to show when the textbox is clicked? What are you trying to achieve or prevent?
ASKER
Desired functionality:
When the user clicks on the "text box" portion, nothing happens.
When the user clicks on the "calendar icon" (to the right of the text box) the calendar pops-up.
When the user clicks on the "clear" button, the date value is set to ""
When the user clicks on the "text box" portion, nothing happens.
When the user clicks on the "calendar icon" (to the right of the text box) the calendar pops-up.
When the user clicks on the "clear" button, the date value is set to ""
ASKER CERTIFIED SOLUTION
THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
ASKER
I am going to see if I can take your fiddler example and reskin it to look like Sample 2.
Thank you.
Thank you.