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.
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.
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 Email
|
|||
|
|
10 comments :
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....!
hello suresh,
your date picker control not working in a masterpage enable page. but it work fine simple aspx page.
@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...
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
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
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?
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
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
Thanks........
I am geeting foll. error wen using it on master page....
Microsoft JScript runtime error: 'jQuery' is undefined
can u tell wt's wrng????