In this article I will explain with an example, how to implement
jQuery UI
DatePicker (Calendar) in ASP.Net MVC.
Controller
The Controller consists of following Action methods.
Action method for handling GET operation
Inside this Action method, simply the View is returned.
Action method for handling POST operation
This Action method gets called when the Submit button is clicked.
Inside this Action method, the selected date is set into a
ViewBag object and the View is returned.
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
return View();
}
[HttpPost]
public ActionResult Index(string selectedDate)
{
ViewBag.Message = Selected Date: + selectedDate;
return View();
}
}
View
HTML Markup
The View consists of an HTML Form which has been created using the Html.BeginForm method with the following parameters.
ActionName – Name of the Action. In this case the name is Index.
ControllerName – Name of the Controller. In this case the name is Home.
FormMethod – It specifies the Form Method i.e. GET or POST. In this case it will be set to POST.
The View also consists of a TextBox and a Submit Button. The TextBox has been made readonly.
jQuery DatePicker Plugin implementation
Inside the HTML Markup, the following CSS file is inherited.
1. jquery-ui.css
And then, the following JS script files are inherited.
1. jquery.min.js
2. jquery-ui.js
Inside the
jQuery document ready event handler, the
TextBox has been applied with the
jQuery DatePicker plugin.
The
jQuery DatePicker plugin has been assigned following properties:
showOn – button
For showing
jQuery DatePicker only when the
Button next to the
TextBox is clicked.
buttonImageOnly – true
This indicates that the Image will be a Button.
buttonImage – URL
The path of the Image file to be displayed as Button.
Submitting the Form
When the Date is selected and the Submit button is clicked, the Form is submitted and the
ViewBag object is checked for NULL and if it is not NULL then, the value of the
ViewBag object is displayed using
JavaScript Alert Message Box.
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
@using (Html.BeginForm("Index", "Home", FormMethod.Post))
{
@Html.TextBox("SelectedDate", "", new { @readonly = "readonly" })
<br />
<br />
<input type="submit" value="Submit" />
}
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css"/>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<script type="text/javascript">
$(function () {
$("#SelectedDate").datepicker({
showOn: 'button',
buttonImageOnly: true,
buttonImage: '/Images/calendar.gif',
});
});
</script>
@if (ViewBag.Message != null)
{
<script type="text/javascript">
$(function () {
alert("@ViewBag.Message");
});
</script>
}
</body>
</html>
Screenshots
![jQuery UI DatePicker (Calendar) example in ASP.Net MVC]()
Browser Compatibility
* All browser logos displayed above are property of their respective owners.
Demo
Downloads
