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
|
|||
35 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????
not working after postbak
how to changes format of date in this as dd/mm/yyyy
hi,
Nice article, but how do i make the date format dd/mm/yyyy.
Thank u
Emma
hi
proivde me with the src for jQuery
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.
Nice job... your coding is simple and understandable & its helping me a lot ...thanks a lot again
date change not working after postback on page
if I want date format like yyyy-mm-dd ,then where to change the format of calender
hi
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
How to show day name of the date of text box using jquery
I want only time picker inside the repeater control sir, pls suggest me...
Not working when create publish folder then run
Thanks Suresh
Would you please tell me how to keep current date selected?
hello sir
your date picker control not working in a masterpage enable page. but it work fine simple aspx page.
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
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
I would like to change the date format to Portuguese. is it possible? thanks
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.
Sreenath : date change not working after postback on page
datepicker doesn't work after postback with update panel
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
Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp"
Note: Only a member of this blog may post a comment.