Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

JQuery Datepicker Example | jQuery Calendar Example with asp.net textbox

Apr 24, 2012
Introduction
  
Here I will explain JQuery UI datepicker or calendar control example in asp.net or how to display or show the JQuery UI Date picker control when click on textbox in asp.net.

Description:
  
In previous post I explained many articles relating to
JQuery. Now in this article I will explain how to show JQuery UI calendar control when click on textbox using asp.net.

Previously I used Ajax calendar control to select dates but to use that calendar control we need to install Ajax Control toolkit and need to add reference of Ajax Control toolkit to our project. After adding references and making necessary changes if we run application Ajax calendar will be like this

If we want to make it beautiful again we need to write some custom css classes based on this post change ajax calendar control style.

Instead of making all these changes its better we can use JQuery UI calendar control. We can easily integrate JQuery UI calendar control in website, we have many other options available with this control and we can easily change the themes I hope more than 20 + readymade themes are available for this Calendar control.

First open Visual Studio and create new website after that write following code in your aspx page


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Default functionality</title>
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.19.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.19.custom.min.js"></script>
<script type="text/javascript">
$(function() {
$("#txtDate").datepicker();
});
</script>
<style type="text/css">
.ui-datepicker { font-size:8pt !important}
</style>
</head>

<body>
<form id="form1" runat="server">
<div class="demo">
<b>Date:</b> <asp:TextBox ID="txtDate" runat="server"/>
</div>
</form>
</body>
</html>
If you observe above code in header section I added some of script files and css classes by using those files we will display calendar control with beautiful css style.You can get those files by downloading attached sample.

After completion of aspx page design and your code modifications just run your application and check your calendar control that would be like below demo

Demo

Download sample code attached


If you enjoyed this post, please support the blog below. It's FREE!

Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

subscribe by rss Subscribe by RSS subscribe by email Subscribe by Email

17 comments :

Anonymous said...

Thx Sures for the pst, It save lots of my time. I impliment it very easily and working fine for my project.
Once again thx a lol....!

Avijit Bhattacharya said...

hello suresh,

your date picker control not working in a masterpage enable page. but it work fine simple aspx page.

Suresh Dasari said...

@Avijit Bhattacharya...
it will work everywhere i hope you are not adding required script files in your master file that's why you are not getting calendar control...

Vinoth P said...

Good Evening Suresh,
I tried this and its working fine,But one small problem. Prev And Next icon are not coming. Please Help Me Out

Avijit Bhattacharya said...

lot of thank you sir for your reply.

but i now double check it, same problem here. in same project it work very fine in simple page but not work in masterpage enable page. i try to send you my code but html code not accept here.

Thank you again
Avijit Bhattacharyay

Avijit Bhattacharya said...

Hello sir,

you surely see in many site, image downloading after viewing this place. i mean all pictue not downloaded at time(common site snapdeal.com and may, ). it's good for programming. how can i implement this feauture in my site?

Sudarsh said...

Hey Avijit,

As you are using materpage, the name of control gets automatically change. So please change the name of control (By checking view source of page.) in script.

script type="text/javascript"
$(function() {
$("#ctl00_ContentPlaceHolder1_txtDate").datepicker();
});
script


Avijit Bhattacharya said...

Hello sir,

Yes sir i find my problem. it's work now fine.
many many thank you sir. your last post about pop up is very usefull.i have another question about pictue download feature, any guideness about this....

again lot of thanks.
Avijit

Anonymous said...

Thanks........

Anonymous said...

I am geeting foll. error wen using it on master page....
Microsoft JScript runtime error: 'jQuery' is undefined
can u tell wt's wrng????

Anonymous said...

not working after postbak

sukhvinder gupta said...

how to changes format of date in this as dd/mm/yyyy

Anonymous said...

hi,

Nice article, but how do i make the date format dd/mm/yyyy.

Thank u

Emma

Anonymous said...

hi
proivde me with the src for jQuery

Anonymous said...

Hi Suresh, thanks for the code. Can I make a small suggest for newbie, instead of using the ID directly why not use <%= txtDate.ClientID%> instead. In this way, the client id will be captured even on masterpage enabled sites.

Anonymous said...

Nice job... your coding is simple and understandable & its helping me a lot ...thanks a lot again

Anonymous said...

date change not working after postback on page

Give your Valuable Comments

Other Related Posts

© 2010-2012 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.