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

Question

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.

datepicker supposed to do this automatic for you. check the documentation: http://jqueryui.com/demos/datepicker/#icon-trigger — Ricardo Binns, Sep 20 '11 at 14:28
Check the updated answer http://stackoverflow.com/questions/7484693/how-to-call-a-jquery-datetime-picker-in-the-image-button-placed-by-the-textbox-co/7488813#7488813 — Harsh Baid, Sep 21 '11 at 04:58

score 1 · Answer 1 · answered Sep 20 '11 at 16:45

1

like i say in comment:

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

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

answered Sep 20 '11 at 16:45

Ricardo Binns

3,228
6
44
71

Hum....I just noticed Thruimaran actually used it already...but just incorrectly.... – William Niu Sep 20 '11 at 16:52
datepicker itself create a button – Ricardo Binns Sep 20 '11 at 16:54

Harsh Baid · Accepted Answer · 2011-09-21T04:56:51.110

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

William Niu · Answer 3 · 2011-09-20T17:43:38.407

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:

You included the wrong URL for your image.
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>

thanks willam i need when the image button onlick event how to implement this? — Thriumaran, Sep 21 '11 at 03:42

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

3 Answers3