JQuery Calendar Popup For ASP.NET MVC

Introduction

In this article we will see how to use the jquery calendar popup for an ASP.NET MVC application. For every application there is a basic need to select a date from the calendar control. For that we have the AJAX calendar popup extender but this AJAX calendar extender works with our ASP.Net controls but not with HTML controls. As we know, in MVC we prefer to use HTML controls rather than ASP.Net controls like textboxes. In this application we will see how to use the calendar control of jquery for a HTML textbox when the focus is on the textbox.

First before starting our work we need to download the custom jquery UI from here. We will use this UI and script to build our calendar popup control for MVC application. So let's get started with the Calendar popup.

Step 1:

First, extract the downloaded jquery UI and then copy and paste the extracted file into your application's root directory (including all files).

Step 2:

Just add the controller and create an Index action which returns our view. Now add the view for the controller action.

Step 3:

In Index.aspx in <head>section</head> provide the links for the downloaded jquery UI scripts and styles like below.

Step 4:

Next, below the above lines, write the following script which will be called datepicker.js file function by providing control id on which we have to show the calendar.

Step 5:

Next in your body paste the following code.

<div class="demo">
<p>Date: <input type="text" id="datepicker"></p>
</div>

In the above we simply created one textbox with an id datepicker which we used in the above script.

Step 6:

Now run your application and see the result like below.

Conclusion

Using jquery UI we can build a very rich user interface application in ASP.Net MVC.

5 Comments

Join the conversation! Your thoughts help the community grow.

Pradeep Patel12y ago
Thanx
Pramod Lawate13y ago
Have any solution to work with IE Browser please share it
Pramod Lawate13y ago
Krishna Thanks for posting this event but its not working in Internet explorar 8 IE8
Stephen Johnson14y ago
Hi Krishna. Its a very useful article for those who wants to learn how to use jquery calendar popup for an ASP.NET MVC application.
- Krishna Garad14y ago
  Thanks