Introduction:
In this article I will explain how to implement JQuery calendar control with dropdownlist selection for month and year example in asp.net.
Download
sample code attached
In this article I will explain how to implement JQuery calendar control with dropdownlist selection for month and year example in asp.net.
Description:
In previous post I explained JQuery datepicker calendar control example in asp.net. Now I will explain how to use dropdownlist selection for month and year in JQuery calendar control using asp.net.
In previous post I explained JQuery datepicker calendar control example in asp.net. Now I will explain how to use dropdownlist selection for month and year in JQuery calendar control using asp.net.
If we use Ajax calendar control we
don’t have a chance to display these type custom options and need to write some
custom css classes to change ajax calendar control style other Ajax calendar
will be like this
 |
Instead of making all these changes its
better to use JQuery UI calendar control to customize based on our requirements.
If we want to use dropdownlist selection for month and year selection in JQuery
calendar control no need to make many change just by set some basic properties
we can achieve this functionality and we can set number years we can display in
year dropdown.
To implement this one 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({
changeMonth:
true,
changeYear:
true,
yearRange:
'1970:2012'
});
});
</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
 |
|
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
|
|||
|
|
20 comments :
in privious i written a post setup and deploye along with database but u r response is for only setup application i want functionality that setup should be create along with database please i waiting 4 ur reply dasari suresh garu
@Srinivas...
if you want to install database also means try to create custom installers and attach to your setup file.
Hi,
In download attachement, dropdown is not coming.
I think you have attached this post code
http://www.aspdotnet-suresh.com/2012/04/jquery-ui-datepickercalendar-example-in.html
Sorry friends it's my mistake i updated post and downloaded code please check it once.
Again Dropdown is not coming. Pl kindly check.
updated... Please check it once and let me know...
Now its working fine.
Thaks
Hema
Great Sir
I need this one with DD/MM/YYYY format. Please give me Solution for it.
check this post to set dateformat based on your requirement
http://www.aspdotnet-suresh.com/2012/05/changeset-date-format-in-jquery.html
hi
suresh can we create calender control with ajaxcalender extender? by the sameway.
Hi Suresh, in my work I have a calender which works good but now what I need is the calender when clicked should show only month and year and when selecting a month that month along with the year should be etered in the text box.
Thanks
hi my name is Nana Adu
i downloaded your codes for the calender and applied to my site
its working very well, but the only problem is that when it populates my database it adds time to it. i will be happy if i can change the time any time i want.
hi sir,
iam developer .net i want a jquery validation for my web forms.will you show an example for that.
this datepicker jquery is not working in updatepanel
and i am using it in content page
I still can not control the calender, provide me more info about it.
Thank you very much for providing this article suresh... Its working fine... its very helpful for me ...
I want to be select Only month and Year;No need date;how to Customize
I will try this one, but I expecting for more.