ASP.NET textbox with jQuery UI DatePicker

Here in this post i will show Jquery DatePicker  On Asp.Net TextBox.

In the other post i  was explained   Plain text as watermark for password text box using

Out PUT :

ASPX Code :

<%@ Page Title="About Us" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"

    CodeFile="About.aspx.cs" Inherits="About" %>

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">

    <center>

    <table>

    <tr>

    <td colspan="6" align="center">

    <h2>Method One</h2>

    </td>

    </tr>

    <tr>

   <td valign="top">

    From Date :

    </td>

    <td valign="top">

    <asp:TextBox ID="txtfromdate" runat="server" />

        <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"

         ControlToValidate="txtfromdate" SetFocusOnError="true"></asp:RequiredFieldValidator>

    </td>

   <td valign="top">

    To Date :

    </td>

   <td valign="top">

    <asp:TextBox ID="txttodate" runat="server" />

        <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server"

        ControlToValidate="txttodate" SetFocusOnError="true"></asp:RequiredFieldValidator>

    </td>

    <td valign="top">

    <asp:Button ID="btnSearch" runat="server" Text="Search" OnClick="btnSearch_Click"/>

    </td>

    <td valign="top">

    <asp:Label ID="lblMonths" runat="server" />

    </td>

    </tr>  

       <tr>

    <td colspan="6" align="center">

    </td>

    </tr>

        <tr>

    <td colspan="6" align="center">

    <h2>Method TWO</h2>

    </td>

    </tr>

    <tr>

   <td valign="top">

    From Date :

    </td>

    <td valign="top">

    <asp:TextBox ID="txtfrom" runat="server" />

        <asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server"

         ControlToValidate="txtfromdate" SetFocusOnError="true"></asp:RequiredFieldValidator>

    </td>

   <td valign="top">

    To Date :

    </td>

   <td valign="top">

    <asp:TextBox ID="txtto" runat="server" />

        <asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server"

        ControlToValidate="txttodate" SetFocusOnError="true"></asp:RequiredFieldValidator>

    </td>

    <td valign="top">

    <asp:Button ID="Button1" runat="server" Text="Search" OnClick="btnSearch_Click"/>

    </td>

    <td valign="top">

    <asp:Label ID="Label1" runat="server" />

    </td>

    </tr>  

    </table>  

    </center>

</asp:Content>

Jquery Script :

 // Method One

    <script type="text/javascript">

        $(document).ready(function () {

            $("[id$=txtfromdate]").datepicker({

                dateFormat: 'mm-dd-yy',

                changeMonth: true,

                changeYear: true

            });

        });

        $(document).ready(function () {

            $("[id$=txttodate]").datepicker({

                dateFormat: 'mm-dd-yy',

                changeMonth: true,

                changeYear: true

            });

        });

    </script>

    // Method Two

    <script type="text/javascript">

        $(document).ready(function () {

            $("[id$=txtfrom]").datepicker({

                showOn: 'button',

                buttonImage: "images/calendar.gif",

                buttonImageOnly: true,

                dateFormat: 'mm-dd-yy',

                changeMonth: true,

                changeYear: true

            });

        });

        $(document).ready(function () {

            $("[id$=txtto]").datepicker({

                showOn: 'button',

                buttonImage: "images/calendar.gif",

                buttonImageOnly: true,

                dateFormat: 'mm-dd-yy',

                changeMonth: true,

                changeYear: true

            });

        });

    </script>