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.

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.

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.