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 dropdownlist selection for month/year in calender using asp.net

Apr 25, 2012
Introduction: 

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.

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

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

25 comments :

srinivas said...

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

Suresh Dasari said...

@Srinivas...
if you want to install database also means try to create custom installers and attach to your setup file.

Anonymous said...

Hi,
In download attachement, dropdown is not coming.

Anonymous said...

I think you have attached this post code
http://www.aspdotnet-suresh.com/2012/04/jquery-ui-datepickercalendar-example-in.html

Suresh Dasari said...

Sorry friends it's my mistake i updated post and downloaded code please check it once.

Anonymous said...

Again Dropdown is not coming. Pl kindly check.

Suresh Dasari said...

updated... Please check it once and let me know...

Anonymous said...

Now its working fine.
Thaks
Hema

Anonymous said...

Great Sir

Anonymous said...

I need this one with DD/MM/YYYY format. Please give me Solution for it.

Suresh Dasari said...

check this post to set dateformat based on your requirement
http://www.aspdotnet-suresh.com/2012/05/changeset-date-format-in-jquery.html

hareesh arava said...

hi
suresh can we create calender control with ajaxcalender extender? by the sameway.

ASA said...

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

Anonymous said...

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.

meena vinay said...

hi sir,

iam developer .net i want a jquery validation for my web forms.will you show an example for that.

snehal said...

this datepicker jquery is not working in updatepanel
and i am using it in content page

hermes said...

I still can not control the calender, provide me more info about it.

C.D.Malavi said...

Thank you very much for providing this article suresh... Its working fine... its very helpful for me ...

Shankar said...

I want to be select Only month and Year;No need date;how to Customize

log said...

I will try this one, but I expecting for more.

Anonymous said...

This is Abhinavsingh993 sir ,Simply sir this article is masterpiece and simple to understand.
Thank you sir

Tapan Kumar said...

Sir
How i am using this in may content page
Plz help,

rahul Upadhyay said...

It's not working with master page and update panal

Tranquil said...

there is an error when without changing the year i insert a date it show 2/20/2014 but my range is only 2005

Anonymous said...

Its not working in content page?Can you help me for this issue?

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.