Dotnetplace.com

.NET Articles, Web Devploment, ASP.NET, HTML, Sharepoint 2010, Aamir Hasan
Advertise Here
Advertise Here
Advertise Here
Advertise Here
Advertise Here
Advertise Here
Advertise Here
Advertise Here
Advertise Here

Advertise

Loading...


Posted by Aamir Hasan   on Tuesday, November 22, 2011 Total Views:  

This example demonstrate how to use jQuery UI Datepicker popup Calender with asp.net. Microsoft jQuery UI libaray is also avaible on CDN hosted. I have used input type textbox, added Microsoft CDN jQueryUI 1.8.16 libarary and CDN CSS Style sheet file for the jQuery datepicker. You can download jQuery UI 1.8.16 libarary from here. You can download entire libarary from http://jqueryui.com/download. Microsoft CDN is also avaible on HTTPS. Let’s start.

 

Note: I have used Microsoft Visual Studio 2011 Developer Preview.

 

Step 1: Open your Microsoft Visual Studio 2011 Developer Preview, click File -> New Web Site. Choose ASP.NET web site from the installed template. I have chosen .NET Framework 4.5; you can choose Framework from dropdownlist as shown in below figure.

Step 2: Right click on your web site, click on Add New Item, Add New Item window will open, select Web Form, give name jQueryUI-Calendar.aspx  and press Add button as shown.

 

Step 3:  Add Microsoft jQuery 1.7 libraries, jQuery UI 1.8.16 libarary and CSS style sheet file under the head section of your aspx page as shown below.
 

    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.js" type="text/javascript"></script>

    <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.16/jquery-ui.js" type="text/javascript"></script>

    <link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.16/themes/humanity/jquery-ui.css"

        rel="stylesheet" type="text/css"/>

Note: jQuery all themes are avaible on Microsoft, google and jquery CDN hosted.

Step 4:  Drag and drop input textbox in your aspx as shown below and it will generate the id named "Text1" in your page.

Step 5:  Copy and paste following code under the head section as given below.
 

    <script type="text/javascript">

        $(function(){

            $("[id$=Text1]").datepicker();

        });

</script>

Run your web site and click on the input textbox, you will see the Datepicker to select the date.



You can display month and year dropdown list in jQuery datepicker by passing changeMonth and changeYear boolen parameter as shown below code.



 <script type="text/javascript">

        $(function(){

            $("[id$=Text1]").datepicker({

                changeMonth:true,

                changeYear:true

            });

        });

</script>
 

You can restrict the date range as given in following code.

<script type="text/javascript">

        $(function(){

            $("[id$=Text1]").datepicker({

                minDate:-15,

                maxDate:+ 3

            });

        });

</script>


In the above code, you can select min 15 days and max 3 days from current date as shown in below figure.



For more options of datepicker to view, click here.


Note:  Microsoft CDN has been changed from ajax.microsoft.com to ajax.aspnetcdn.com to increase the performace. However, old name ajax.microsoft.com domain will remain same. But ajax.microsoft.com is not recommended.

 

Download

jQueryUI-Calendar.zip (145.38 kb)

Click here to see live demo

Protected by Copyscape Online Plagiarism Tool

Comments (2) -

Anoop
Anoop India
4/19/2012 12:57:42 AM #

it's really good

SimpleScripts
SimpleScripts United States
7/8/2012 5:23:55 AM #

A really usefull post - Thank you very much I wish you will not mind me writting about this post on my website I will also leave a linkback Thanks

mac makeup store
mac makeup store United States
10/15/2014 4:52:38 PM #

Nice post. I learn one thing more challenging on different blogs everyday. It's going to always be stimulating to read content from different writers and follow somewhat something from their store. I'am want to make use of some with the content material on my weblog whether you don't mind. Natually I�ll offer you a link on your net blog. Thanks for sharing.

Cheap MAC Makeup
Cheap MAC Makeup People's Republic of China
10/23/2014 12:02:08 AM #

This post is worthy of appreciation, looking forward to more exciting! http://www.macmakeup.cc/

MAC Cosmetics
MAC Cosmetics People's Republic of China
10/23/2014 12:02:45 AM #

Wow, perfect. Fortunately, I found your website!   http://www.macmakeup.cc/mac-concealer-c-180.html

Mac Makeup
Mac Makeup People's Republic of China
10/23/2014 1:25:18 AM #

Thanks for sharing!  http://www.macmakeup.cc/mac-makeup-bags-c-157.html

Add comment

  Country flag

biuquote
  • Comment
  • Preview
Loading

Advertizement 1
Advertizement 2
Advertizement 3
Advertizement 4
Advertizement 5