Calendar Control Using jQuery UI In ASP.NET MVC 5

Vithal Wadje
9y
109.2k
0
2

Article

Background

Calender control is very useful in any application and in ASP.NET there are several default server control to use but in MVC we have lot of options to use calendar control which all are client side control. In this article we will use Calender control in ASP.NET MVC with the help of jQuery UI library. So let us implement this requirement step by step,

Step 1 : Create an MVC application.

"Start", then "All Programs" and select "Microsoft Visual Studio 2015".
"File", then "New" and click "Project", then select "ASP.NET Web Application Template" and provide the Project a name as you wish and click on OK.
Choose MVC empty application option and click on OK

Step 2: Add model class.

Right click on Model folder in the created MVC application and add class named EmpModel and write the following line of code,

EmpModel.cs

using System;
using System.ComponentModel.DataAnnotations;
namespace CalenderControlInMVCUsingjQuery.Models
{
public class EmpModel
{ [Display(Name ="Enter Date")]
public DateTime EnterDate { get; set; }
}
}

Step 3: Home controller.

Right click on Controller folder in the created MVC application and add the controller class,

Now after selecting controller template, click on add button then the following window appears,

Specify the controller name and click on add button,

HomeController.cs

using System.Web.Mvc;
namespace CalenderControlInMVCUsingjQuery.Controllers
{
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
return View();
}
}
}

In the above code, the only action result method named Index will handle the user request when the user request for the view named Index.cshtml. The same we will add later,

Step 4: Reference jQuery UI.

Reference jQuery UI css and js library reference as there are many ways to add the reference of jQuery library into our project. The following are some methods,

Using NuGet package manager , you can install library and reference into the project.

Right click on created MVC project and find Nuget Package manager option,

Now the following window will appear and search for the jQuery UI as,

Choose appropriate version and click on Install button. It will install jQuery UI library to your project and library script file get added into the script folder of the created project which you can add reference into the project,

Use CDN library provided by Microsoft, jQuery, Google or any other which requires active internet connection.
Download jQuery files from jQuery official website and reference into the project.

In this example we will use jQuery CDN library.

Step 5: Create jQuery function to invoke datepicker function,

<script>
$(document).ready(function() {
$("#EnterDate").datepicker();
});
</script>

To work above function don't forget to add the reference of the following jQuery CDN library as,

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

We can overload datepicker function with many options but following are the most commonly used properties which are the following,

dateFormat: This property is used to set the date format for selected date from calendar.
changeMonth: This is a boolean property having the value true and false which decide whether the month dropdownlist is visible or not on calendar control.
changeYear: This is also a boolean property having the value true and false which decide whether the year dropdownlist to be visible or not in calendar control.
yearRange: It sets the year range for calendar control such as how many past and future years to display in calendar.
showOn: This property decided on which control Id does the calendar control will popup.

Step 6: Add View.

Add strongly typed view named index from EmpModel class as :

After adding necessary code, files and logic the Index.cshtml code will look like the following,

Index.cshtml

@model CalenderControlInMVCUsingjQuery.Models.EmpModel
@{
ViewBag.Title = "www.compilemode.com";
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
$(document).ready(function() {
$("#EnterDate").datepicker();
});
</script>
@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
<div class="form-horizontal">
<hr />
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
<div class="form-group">
@Html.LabelFor(model => model.EnterDate, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.EnterDate, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.EnterDate, "", new { @class = "text-danger" })
</div>
</div>
</div>
}

Now run the application and put mouse pointer into the textbox. You can see the calendar control will popup as in the following screenshot,

The above calendar by default date format is mm/dd/yy. If you want to change default date format then use dateformat property of datepicker function as,

$(document).ready(function() {
$("#EnterDate").datepicker({
dateFormat:"dd-mm-yy"
});
});

Now select date from calendar, It will be now dd-mm-yy as,

You can show Date and month dropdownlist on calendar control to quickly navigate between dates. To use this feature you need to use changeMonth and changeYear property in datepicker function as,