Thursday, 24 March 2016

Ajax UpdatePanel inside Jquery DatePicker Calender in Textbox

Ajax Updatepanel inside use to jquery datepicker calender in textbox control using asp.net.

                                    DEMO

                       

                                                   Download

                                  HTML CODING


<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head2" runat="server">
    <title></title>

    <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

    <script type="text/javascript" lang="javascript">
        $(function () {
            $("#<%=textboxDate.ClientID %>").datepicker({
                dateFormat: 'dd/mm/yy',
                showOn: 'button',
                buttonImageOnly: true,
                buttonImage:" "+'oCalendar.gif'
            });

        });
    </script>

</head>
<body>
    <form id="form2" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional"><ContentTemplate>
        <table><tr><td>
            <asp:Label ID="Label1" runat="server" Text="Select Date"></asp:Label>
            </td><td>
                <asp:TextBox ID="textboxDate" runat="server" Height="22px"></asp:TextBox>
            </td></tr></table>
   </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="textboxDate" />
            </Triggers>
        </asp:UpdatePanel>
    </div>
    </form>
</body>

</html>







0 comments:

Post a Comment