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.
<link rel="stylesheet" href="../../jquery-ui-1.8.17.custom/development-bundle/themes/base/jquery.ui.all.css">
<script src="../../jquery-ui-1.8.17.custom/development-bundle/jquery-1.7.1.js"></script>
<script src="../../jquery-ui-1.8.17.custom/development-bundle/ui/jquery.ui.core.js"></script>
<script src="../../jquery-ui-1.8.17.custom/development-bundle/ui/jquery.ui.widget.js"></script>
<script src="../../jquery-ui-1.8.17.custom/development-bundle/ui/jquery.ui.datepicker.js"></script>
<link rel="stylesheet" href="../../jquery-ui-1.8.17.custom/development-bundle/demos/demos.css">
In the above lines we have referred only to the jquery UI scripts and styles.
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.
<script>
$(function () {
$("#datepicker").datepicker({
altField: "#alternate",
altFormat: "DD, d MM, yy"
});
});
</script>
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.