Sunday, August 26, 2012

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>

No comments:

Post a Comment