How to call a jquery datetime picker in the image button placed by the textbox control

This is my jquery datetimepicker i want to call this jquery in the image button which is placed nearby the textbox.how should do?

<script type="text/javascript">
 $(function() {
        $( "#<%= this.txtFrom.ClientID %>" ).datepicker({
            showOn: 'both',
            buttonImage: "Images/calendar.gif",
            buttonImageOnly: true,
            showmonth:true,
            autoSize: true,
            showAnim: 'slideDown',
            duration: 'fast'
        });
    });
</script>

this is my textbox and imagebutton.

  <asp:TextBox ID="txtFrom" MaxLength="10" runat="server" ToolTip="Enter From Date"></asp:TextBox>
                                    <asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="~/Images/clock_add.gif" />

when i click this image开发者_如何转开发 button that jquery should call.

---

like i say in comment:

datepicker supposed to do this automatic for you. check the documentation:

jqueryui.com/demos/datepicker/#icon-trigger

---

Javascript:

<script type="text/javascript">
 $(function() {
        $("#<%= txtFrom.ClientID %>").datepicker({
            showmonth:true,
            autoSize: true,
            showAnim: 'slideDown',
            duration: 'fast'
        });

        $("#<%= ImageButton1.ClientID %>").click(function() {
          $("#<%= txtFrom.ClientID %>").datepicker('show');
        });
    });
</script>

Code:

<asp:TextBox ID="txtFrom" MaxLength="10" runat="server" ToolTip="Enter From Date">
</asp:TextBox>
<asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="~/Images/clock_add.gif" />

Reference jquery forum

---

You really have two choices here, which are precisely what ric_bfa and Harsh mentioned. From your code, I am guessing you were trying to use the icon-trigger built into the datepicker. I see two mistakes though:

1. You included the wrong URL for your image.
2. You displayed the image explicitly; datepicker takes care of that for you.

In summary, your code would look something like this:

    $( "#<%= this.txtFrom.ClientID %>" ).datepicker({
        showOn: 'both',
        buttonImage: "Images/clock_add.gif",
        buttonImageOnly: true,
        showmonth:true,
        autoSize: true,
        showAnim: 'slideDown',
        duration: 'fast'
    });

And the ASP.NET code:

<asp:TextBox ID="txtFrom" MaxLength="10" runat="server" ToolTip="Enter From Date"></asp:TextBox>