Bootstrap DatePicker (Calendar) example in ASP.Net Core

In this article we will discuss Bootstrap DatePicker (Calendar) example in ASP.Net Core.

Here we will explain This article will also illustrate how to get the selected Date of the Bootstrap DatePicker (Calendar) inside Controller on Button click in ASP.Net Core MVC.

Before start this article, please visit our previous article Display data in GridView (Grid) in ASP.Net Core.

Controller

The Controller consists of two 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 Form is posted. The value of the selected date from the Bootstrap DatePicker is fetched and it set into a ViewBag object.

The value of the ViewBag object will be used for displaying the selected date in View using JavaScript Alert Message Box. And then we print the ViewBag message in the label.

	public class HomeController : Controller
	{
	private readonly ILogger<HomeController> _logger;
	public HomeController(ILogger<HomeController> logger)
	{
	_logger = logger;
	}
	public IActionResult Index()
	{
	return View();
	}
	[HttpPost]
	public IActionResult Index(string dDate)
	{
	ViewBag.Message = "Selected Date: " + dDate;
	return View();
	}
	}

view raw HomeController.cs hosted with ❤ by GitHub

View

The View consists of an HTML Form which has been created using the Razor Tag attributes with the following attributes.

asp-action – Name of the Action. In this case the name is Index.

asp-controller – Name of the Controller. In this case the name is Home.

method – It specifies the Form Method i.e. GET or POST. In this case it will be set to POST.

Inside the Form, there is a TextBox and a Submit Button. The TextBox has been applied with the Bootstrap DatePicker Plugin.

When the date is selected and the Submit button is pressed, the Form is submitted and the value of the selected date is returned in a ViewBag object which is displayed using JavaScript Alert Message Box and then we print the ViewBag message in the label.

	@{
	ViewData["Title"] = "Home Page";
	}
	<!-- Bootstrap -->
	<script type="text/javascript" src='https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js'></script>
	<script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js'></script>
	<link rel="stylesheet" href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css'
	media="screen" />
	<!-- Bootstrap -->
	<!-- Bootstrap DatePicker -->
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.css" type="text/css" />
	<!-- Bootstrap DatePicker -->
	@section scripts{
	<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js" type="text/javascript"></script>
	<script type="text/javascript">
	$(function () {
	$('#txtDate').datepicker({
	changeMonth: true,
	changeYear: true,
	format: "dd/mm/yyyy",
	language: "tr"
	});
	});
	</script>
	}
	<form asp-controller="Home" asp-action="Index" method="post">
	<div class="col-12">
	<div class="col-6">
	<input type="text" id="txtDate" name="dDate" class="form-control" autocomplete="off" />
	</div>
	<div class="col-6 mt-3 text-center">
	<input type="submit" value="Submit" class="btn btn-primary" />
	</div>
	<div class="col-6 mt-3 text-center">
	<label id="lblDate">@ViewBag.Message</label>
	</div>
	</div>
	@if (ViewBag.Message != null)
	{
	<script type="text/javascript">
	$(function () {
	alert("@ViewBag.Message");
	});
	</script>
	}
	</form>

view raw Index.cshtml hosted with ❤ by GitHub

Output

When run the application we can see the output like below.

</> Find the Source Code in Github

  Summary

In this tutorial we discussed about Bootstrap DatePicker (Calendar) example in ASP.Net Core. If have any question related to this topic then give your feedback.