Question

I am using from date text box and a calender button. When I click on calender button I should get datepicker from which i can select date.

Following is my code

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css"
    rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript">
    function OpenDatePicker() {
        $("#<%=datepicker.ClientID %>").datepicker({ changeMonth: true,
            changeYear: true,
            duration: "slow",
            dateFormat: "dd-mm-yy",
            closeText: "X",
            showButtonPanel: true,
            onSelect: function (dateText, inst) { $("#<%=tbFromDate.ClientID %>").val(dateText); $(this).datepicker("hide"); },
            onClose: function (dateText, inst) {
                $("#<%=datepicker.ClientID %>").blur();
            }
        });

    }      

</script>

Aspx code :

<div id="datepicker" runat="server">
    <asp:TextBox runat="server" ID="tbFromDate"></asp:TextBox><asp:ImageButton runat="server"  ID="ibtnDateFrom" ImageUrl="~/Images/date.gif" OnClientClick="javascript:OpenDatePicker();" /></div>

When I run code and click on button datepicker opens for less than second or something and closes and page is refreshed.

Whats wrong in my code?

Answer 1

This is due to the ImageButton causing a Postback. You can just use an Image, and apply a css style on it to display the hand cursor on hover.