Search - Articles
DevASP.NET for ASP.NET, VB.NET, XML and C# (C-Sharp) Developers Tuesday, March 03, 2009
Dev Articles
Search Directory
ASP.NET
VB.Net
C-Sharp
SQL Server
 

How to use jQuery Datepicker in ASP.NET

Author: Jeff Nava

JQuery is the efficient way for client side script. jQuery UI Datepicker is an extremely useful feature in jQuery.

 

There are so many Datepickers available but jQuery UI Datepicker is very easy to integrate in ASP.NET. You can easily configure and change the theme of jQuery UI Datepicker. A pop up Datepicker appears when you go to the text box and disappears when you select a date or leave the text box without selecting any date. jQuery really made life easy for developers to use client side script by providing such kind of functionalities.

To use jQuery DatePicker in a web page is very simple as you will see in this simple article. You just need to provide three line of code in between <script> tag but first of all you must have to include jQuery, jQuery UI and jQuery CSS files after downloading.

  1. Open Visual Studio 2010
  2. File > New > Website
  3. Visual basic or Visual C# > ASP.NET Web Site
  4. Website > Add New Item > Web Form
  5. Write following tags in between <head> tag of aspx page

    <link type="text/css" href="Scripts/jquery-ui-1.8.18.custom.css" rel="Stylesheet" />
    <script type="text/javascript" src="Scripts/jquery-1.4.1.min.js" ></script>
    <script type="text/javascript" src="Scripts/jquery-ui-1.8.18.custom.min.js" ></script>

    I have all these three files in “Script” folder. First is the CSS file in jQuery, second I am including source to use jQuery and third is the source file for jQuery UI. Datepicker is included in jQuery UI along with other JQuery UI feathers.
     
  6. Write code below in between <div> tag

    <p>Click in the Text Box to select date</p>
    <asp:Label ID="LabelDate" runat="server" Text="Select Date"></asp:Label>
    <asp:TextBox ID="TextBoxDate" runat="server"></asp:TextBox>
     
  7. Now add another <script> tag in between <body> tag and write code below

    <script type="text/javascript">
         $(function () {
            $("#TextBoxDate").datepicker({ dateFormat: 'dd/mm/yy' });
         });
    </script>


    Here I am using jQuery Datepicker with text box. “TextBoxDate” is the ID of the text box. Notice that in datepicker, I have mentioned date format.   
     
  8.  Here is the complete code in aspx page

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <link type="text/css" href="Scripts/jquery-ui-1.8.18.custom.css" rel="Stylesheet" />
        <script type="text/javascript" src="Scripts/jquery-1.4.1.min.js" ></script>
        <script type="text/javascript" src="Scripts/jquery-ui-1.8.18.custom.min.js" ></script>
        <script type="text/javascript">
            $(function () {
                $("#TextBoxDate").datepicker({ dateFormat: 'dd/mm/yy' });
            });
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
        <p>Click in the Text Box to select date</p>
        <asp:Label ID="LabelDate" runat="server" Text="Select Date"></asp:Label>
        <asp:TextBox ID="TextBoxDate" runat="server"></asp:TextBox>
           
        </div>
        </form>
    </body>
    </html>
   
Add Article Comment:
Name :
Email Address :
   
Comments :
 
   
<< How to use Query String to pass values between ASP.NET Pages

Disclaimer - Privacy
© 2002-2017 DevASP.net