UncleCoder.com

UncleCoder.com

Free programming examples and instructions

JQuery Ui Datepicker in Updatepanel - Asp.net

Demo and Code for how to implement jQuery UI Date picker in Updatepanel Asp.net

by Athil


Posted on 27 Jun 2018 Category: Asp.net Views: 57

Edited on 10 Jul 2019


Here I am going to show how to implement jquery UI datepicker in Updatepanel.

DEMO

Before I wrote an article how to implement Jquery UI date picker in Asp.net The same way we can bring the datepicker and after that make the following changes.

Aspx changes

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                 <asp:TextBox ID="TxtStartDate" runat="server"></asp:TextBox> 
               ..........

                </ContentTemplate>
        </asp:UpdatePanel>

Javascript

function datepickerInitial()
        {
            $("#<%= TxtStartDate.ClientID %>").datepicker();
        }
        $(document).ready(function () {
            datepickerInitial();
        });
        var reloadEvent = Sys.WebForms.PageRequestManager.getInstance();
        reloadEvent.add_endRequest(function () {
            datepickerInitial();
});

Full Demo Code

ASPX



<!DOCTYPE html>

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

        <link type="text/css" rel ="stylesheet" href= "/css/jquery-ui.css" />
        <link type="text/css" rel="stylesheet" href="/css/DatePicker.css" />

        <h1>Demo Jquery Datepicker in update panel </h1>

     

        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                 <asp:TextBox ID="TxtStartDate" runat="server"></asp:TextBox> 
                <asp:Button ID="btn1" runat="server" Text="Submit" OnClick="btn1_Click" />
                </ContentTemplate>
        </asp:UpdatePanel>
       

    </div>
    </form>
</body>
    
    <script type="text/javascript" src="/js/jquery.min.js" >
    </script>
    <script type="text/javascript" src="/js/jquery-ui.js">
    </script>
 
</html>

Javascript

 <script>
        function datepickerInitial()
        {
            $("#<%= TxtStartDate.ClientID %>").datepicker();
        }
        $(document).ready(function () {
            datepickerInitial();
        });
        var reloadEvent = Sys.WebForms.PageRequestManager.getInstance();
        reloadEvent.add_endRequest(function () {
            datepickerInitial();
});
        </script>

C# Code

 protected void btn1_Click(object sender, EventArgs e)
        {
            ScriptManager.RegisterStartupScript(this, typeof(Page), "ScriptName", "<script>alert('Selected Date "+TxtStartDate.Text+" ');</script>", false);
        }

 



Leave a Comment: