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

35 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....!

Unknown 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 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

Unknown 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

Unknown 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


Unknown 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

Anonymous said...

if I want date format like yyyy-mm-dd ,then where to change the format of calender

Anonymous said...

hi

Anonymous said...

Hello sir i looking for only time piker control i had search from couple of days but i am not able to get anything simple like your date picker please help me

Mizanur said...

How to show day name of the date of text box using jquery

Unknown said...

I want only time picker inside the repeater control sir, pls suggest me...

Praful V. Dangre said...

Not working when create publish folder then run

Unknown said...

Thanks Suresh

Anonymous said...

Would you please tell me how to keep current date selected?

Unknown said...

hello sir

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

Unknown said...
This comment has been removed by the author.
Suresh Dasari said...

If anybody want to change date format in jquery check below article

http://www.aspdotnet-suresh.com/2012/05/changeset-date-format-in-jquery.html

Suresh Dasari said...

for jquery calendar control with master page please check following article

http://www.aspdotnet-suresh.com/2015/05/jquery-ui-datepicker-calendar-with-master-page-content-example-in-aspnet.html

Unknown said...

I would like to change the date format to Portuguese. is it possible? thanks

Anonymous said...

I have issues with the datepicker. I have also posted the question to stackoverflow :

http://stackoverflow.com/questions/30887430/jquery-datepicker-not-displayed-on-first-click

Please help me I am really stuck from long time.

Anonymous said...

Sreenath : date change not working after postback on page

neveen said...

datepicker doesn't work after postback with update panel

Unknown said...

sir, how to hide/close the calender when we click anywhere else on the screen.... when i select the date, then the calender is getting closed. but i want the calender to get closed when clicked anywhere else on the screen

Anonymous said...

Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp"

Give your Valuable Comments

Note: Only a member of this blog may post a comment.

© 2015 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.