• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 419
  • Last Modified:

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!!!!
0
Tom Knowlton
Asked:
Tom Knowlton
  • 2
  • 2
1 Solution
 
zephyr_hex (Megan)DeveloperCommented:
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?
0
 
Tom KnowltonWeb developerAuthor Commented:
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 ""
0
 
zephyr_hex (Megan)DeveloperCommented:
With the following HTML

<input type="text" id="datepicker">
<input type="button" id="btnClear" value="Clear">

Open in new window


You can disable the calendar on the textbox and clear the date using JQuery:

$("#datepicker").datepicker({
  showOn: "button",
  buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif",
  buttonImageOnly: true
});

$('#btnClear').click(function() {
  $("#datepicker").val("");
});

Open in new window


Here is a Fiddle Demo
0
 
Tom KnowltonWeb developerAuthor Commented:
I am going to see if I can take your fiddler example and reskin it to look like Sample 2.

Thank you.
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now