UncleCoder.com

UncleCoder.com

Free programming examples and instructions

jquery Date picker in update panel

Demo and Code for how to use jQuery datepicker in updatepanel

by Athil


Posted on 08 Apr 2017 Category: Asp.net Views: 1201

Edited on 10 Aug 2017



DEMO

Here I am going to show how to implement Jquery Date Picker in an update panel, With the help of  PageRequestManager  I have done this. 

Download the CSS and scripts here

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

Full Example 

On Client Side

<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>

        <br/>

        <br/>

        <br/>

        <br/>

        <br/>

        <br/>

        <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" />
                </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>

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

</script>

 

On Server Side

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

Related Posts

How to change date format in jQuery date picker



Leave a Comment:


Advertisement