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

Nobuko Marchionni
Nobuko Marchionni United States
6/12/2015 12:14:22 PM #

An impressive share! I have just forwarded this onto a co-worker who was doing a little research on this. And he actually ordered me dinner because I found it for him... lol. So let me reword this.... Thanks for the meal!! But yeah, thanks for spending time to talk about this issue here on your internet site.

Bee Tuer
Bee Tuer United States
6/28/2015 12:17:30 PM #

You really make it seem so easy with your presentation but I find this matter to be really something which I think I would never understand. It seems too complex and extremely broad for me. I'm looking forward for your next post, I'll try to get the hang of it!|

Betty Hurlburt
Betty Hurlburt United States
6/30/2015 8:04:04 PM #

It is appropriate time to make a few plans for the longer term and it's time to be happy. I have read this put up and if I could I want to suggest you few attention-grabbing things or tips. Perhaps you could write next articles referring to this article. I desire to learn more issues approximately it!

Edythe Arguin
Edythe Arguin United States
7/5/2015 12:25:25 PM #

Get the latest working games, apps and themes with regard to android. We got damaged games with unlimited gold that is exlusive with regard to apkmaniacs. com. We now have the most games for android. Just check it out there.

Grant Krnach
Grant Krnach United States
7/6/2015 5:30:59 AM #

Download the latest working games, apps and themes for android. We got broke games with unlimited rare metal that is exlusive for apkmaniacs. com. We now have typically the most games for google android. Just check it out there.

Lonnie Buffkin
Lonnie Buffkin United States
7/7/2015 2:40:26 AM #

Get the latest working games, apps and themes regarding android. We got damaged games with unlimited rare metal that is exlusive for apkmaniacs. com. We now have the particular most games for android. Just check it out there.

Blake Kanniard
Blake Kanniard United States
7/7/2015 5:17:02 PM #

I have been browsing online more than 2 hours today, yet I never found any interesting article like yours. It is pretty worth enough for me. In my opinion, if all website owners and bloggers made good content as you did, the net will be much more useful than ever before.|

Giuseppe Munk
Giuseppe Munk United States
7/7/2015 9:52:02 PM #

Download the latest working video games, apps and themes with regard to android. We got cracked games with unlimited gold that is exlusive regarding apkmaniacs. com. We have typically the most games for google android. Just check it out there.

Jenell Corazza
Jenell Corazza United States
7/8/2015 7:04:27 PM #

It is appropriate time to make a few plans for the longer term and it is time to be happy. I have read this submit and if I could I want to counsel you some fascinating issues or advice. Perhaps you could write subsequent articles relating to this article. I wish to learn even more issues about it!

Dorothea Peninger
Dorothea Peninger United States
7/13/2015 2:51:53 AM #

I like the helpful information you provide to your articles. I'll bookmark your weblog and take a look at once more here frequently. I'm quite sure I'll be informed many new stuff proper right here! Good luck for the next!|

Add comment

  Country flag

biuquote
  • Comment
  • Preview
Loading

Advertizement 1
Advertizement 2
Advertizement 3
Advertizement 4
Advertizement 5