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 (6) -

Dave Hoeft
Dave Hoeft United States
1/11/2016 11:42:36 AM #

What do you advise to me?

recommended site
recommended site United States
5/16/2016 8:59:07 PM #

We are a group of volunteers and opening a new scheme in our community. Your website offered us with valuable info to work on. You've done a formidable job and our entire community will be thankful to you.

Reinaldo Scholtz
Reinaldo Scholtz United States
5/21/2016 11:21:26 AM #

<p>Awesome! So glad you were inspired! Good luck! Smile</p>

Anika Urbach
Anika Urbach United States
5/22/2016 8:50:09 AM #

<p>Can you point me in the direction of the paint brushes that you used pretty please? Your kitchen looks gorgeous! I am about to paint my cabinets white with chalk paint, too. They were painted black before we bought the house. I cannot WAIT for them to be white and bright!!!</p>

Akshika
Akshika United States
5/24/2016 10:14:24 PM #

If i want to keep on adding years then how can i do it??

Akshika
Akshika India
5/24/2016 10:38:51 PM #

Hey i got it.Thanks for the code

Kasey Faragher
Kasey Faragher United States
5/26/2016 1:04:28 PM #

Hi there!  We are similarly a tutor.  Thank you for making such an important comment.  Being from Adamsville , has provided me with a better idea on what is needed to commute to Riverside.  My Spouse And I will go on to  come and check up your blog to better grasp where to go after we come to altlanta ga.  You need to continue writing and show us your opinions on University of the Ozarks (AR).  Plan to see you pretty soon at the upcoming job fair at Kraft Foods.  Bye.

Sam Roope
Sam Roope United States
5/27/2016 4:11:26 AM #

Exceptional write up.  I was glad to stumble on this since I was also conceived in NY.  additionally, I appreciate you for showing up at Deland and aiding me to better appreciate culinary skills.  This helped me with my admission to University of South Carolina.  Looking forward to seeing you in our apartment and catch up with our badminton game.

Darci Horovitz
Darci Horovitz United States
5/28/2016 12:03:58 AM #

I find\think\belive\consider your blog very interesting. I also run\write\make\record a blog about aquarium plants,  pond plants,  bonsai trees,  succulents,  orchids and plants for terrarium. I think it's great to share with our thoughts and experience.  You can visit my blog.

Noah Wagenheim
Noah Wagenheim United States
6/4/2016 5:03:46 AM #

Good web site! I really love how it is simple on my eyes and the data are well written. I'm wondering how I could be notified when a new post has been made. I've subscribed to your RSS which must do the trick! Have a nice day!

Rachel Such
Rachel Such United States
6/4/2016 4:15:07 PM #

Excellent weblog here! Additionally your web site a lot up very fast! What host are you the usage of? Can I get your affiliate link in your host? I desire my site loaded up as quickly as yours lol

Esteban Barela
Esteban Barela United States
6/5/2016 3:47:56 PM #

Nice read, I just passed this onto a friend who was doing some research on that. And he actually bought me lunch because I found it for him smile So let me rephrase that: Thanks for lunch!

Add comment

  Country flag

biuquote
  • Comment
  • Preview
Loading

Advertizement 1
Advertizement 2
Advertizement 3
Advertizement 4
Advertizement 5