Click here to Skip to main content
13,193,970 members (47,959 online)
Click here to Skip to main content
Add your own
alternative version


44 bookmarked
Posted 11 Aug 2008

How to easily use the jQuery DatePicker in ASP.NET

, 20 Aug 2008
Rate this:
Please Sign up or sign in to vote.
How to easily use the jQuery DatePicker in ASP.NET.


JQuery is an excellent JavaScript library to build modern user interactive websites. It's very easy to use jQuery in any web application. jQuery has a strong set of JavaScript UI controls, like date picker, tab panel etc.

I've written a small utility class to use the jQuery DatePicker in ASP.NET. It's very simple to use this class. You just need to pass the Page object and TextBox of your page.



Using the code

Take a look at the the following utility class:

using System;
using System.Collections.Generic;
using System.Text;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace Util
    public class JQueryUtils
        public static void RegisterTextBoxForDatePicker(Page page, 
                           params TextBox[] textBoxes)
            RegisterTextBoxForDatePicker(page, "dd-mm-yy", textBoxes);
        public static void RegisterTextBoxForDatePicker(Page page, 
               string format, params TextBox[] textBoxes)
            bool allTextBoxNull = true;
            foreach (TextBox textBox in textBoxes)
                if (textBox != null) allTextBoxNull = false;
            if (allTextBoxNull) return;
                 "jquery", "JQuery/jquery.js");
                 "jquery.ui.all", "JQuery/ui/jquery.ui.all.js");
                 "<link  rel=\"stylesheet\" href=\"JQuery/themes/" + 
                 "flora/flora.datepicker.css\" />");
            StringBuilder sb = new StringBuilder();
            sb.Append("$(document).ready(function() {");
            foreach (TextBox textBox in textBoxes)
                if (textBox != null)
                    sb.Append("$('#" + textBox.ClientID + "').datepicker(
                       {dateFormat: \"" + format + "\"});");
                 "jQueryScript", sb.ToString(), true);

The usage is very simple. If you have a TextBox named MyDateTextBox in your .aspx page, then you have to write the following line in the Page_Load event to attach the TextBox with jQuery:

protected void Page_Load(object sender, EventArgs e)
    Util.JQueryUtils.RegisterTextBoxForDatePicker(Page, MyDateTextBox); 

The second parameter takes variable arguments. So you can pass any number of TextBoxes to the function. There is also an overloaded function to take your desired date format.

You must download the jQuery library from the jQuery UI site

You can just download the files for DatePicker. But remember to rename the .js files in my JQueryUtils class. You can see that I've written the jQuery core library JavaScript file name, .ui.all.js file, and the .css file for DatePicker.

I've attached a sample project as well. Cheers!

My other articles


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Sowkot Osman
Software Developer (Senior)
Australia Australia
-7 years of extensive experience in devloping both desktop and web applications in C#.NET, VB.NET and ASP.NET, ASP.NET MVC 3.0/4.0
-5 years of experience in developing web applications in J2EE, Free Marker, JSP, Spring MVC, Spring Webflow.
-Expertise in Software Architecture and Framework design.

You may also be interested in...


Comments and Discussions

Questionrenaming .js files issue Pin
Member 1267789430-Nov-16 0:45
memberMember 1267789430-Nov-16 0:45 
QuestionIs there a way to disable certain dates from codebehind? Pin
Member 844760614-Jul-15 2:43
memberMember 844760614-Jul-15 2:43 
QuestionJquery datepicker Pin
nasirabad20-Nov-14 4:30
membernasirabad20-Nov-14 4:30 
Question'System.Web.Util' is inaccessible due to its protection level Pin
munirshaikh3-Oct-13 2:20
membermunirshaikh3-Oct-13 2:20 
Questionchange default language Pin
Burak Akku12-Mar-12 2:19
memberBurak Akku12-Mar-12 2:19 
GeneralJquery Date picker Pin
Franklinlloyd19-Jan-10 9:27
memberFranklinlloyd19-Jan-10 9:27 
Generalupdate panel problem Pin
andresdigi256-Nov-09 1:56
memberandresdigi256-Nov-09 1:56 
NewsEasier way to use jQuery Datepicker on ASP.NET controls Pin
Rob van Meeuwen1-Oct-09 22:52
memberRob van Meeuwen1-Oct-09 22:52 
GeneralNo response on FormView's TextBox Pin
josh.wu8-Sep-09 16:15
memberjosh.wu8-Sep-09 16:15 
GeneralUse the text Pin
prpleprncs2-May-09 19:15
memberprpleprncs2-May-09 19:15 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.171018.2 | Last Updated 21 Aug 2008
Article Copyright 2008 by Sowkot Osman
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid