In this article I will explain with an example, how to implement Bootstrap DatePicker (Calendar) in ASP.Net Core Razor Pages.
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 Razor Pages.
The Date format for the selected Date will be set to dd/MM/yyyy format.
Note: For beginners in ASP.Net Core Razor Pages, please refer my article ASP.Net Core Razor Pages: Hello World Tutorial with Sample Program example.
 
 
Bootstrap DatePicker Plugin
This article makes uses of the DatePicker for Bootstrap plugin.
 
 
Razor PageModel (Code-Behind)
The PageModel consists of two Action Handler methods.
Handler method for handling GET operation
This Handler method handles the GET calls, for this particular example it is not required and hence left empty.
 
Handler method for handling Button Click and POST operation
This Handler method handles the POST call when the Submit Button is clicked and the Form is submitted.
The Handler method for POST operation accepts the value of the selected date from the Bootstrap DatePicker and sets into the Message property.
The value of the Message property will be used for displaying the selected date in Razor Page using JavaScript Alert Message Box.
public class IndexModel : PageModel
{
    public string Message { get; set; }
 
    public void OnGet()
    {
    }
 
    public void OnPostSubmit(string selectedDate)
    {
        this.Message = "Selected Date: " + selectedDate;
    }
}
 
 
Razor Page (HTML)
The HTML of Razor Page consists of an HTML Form which consists of an HTML TextBox and a Submit Button.
The TextBox has been made ReadOnly and has been applied with the Bootstrap DatePicker Plugin.
The Submit Button has been set with the POST Handler method using the asp-page-handler attribute.
Note: In the Razor PageModel, the Handler method name is OnPostSubmit but here it will be specified as Submit when calling from the Razor HTML Page.
 
When a date is selected and the Submit button is pressed, the Form is submitted and the value of the selected date is returned in Message property which is later displayed using JavaScript Alert Message Box.
@page
@addTagHelper*, Microsoft.AspNetCore.Mvc.TagHelpers
@using Bootstrap_DatePicker_Razor_Core.Pages;
@model IndexModel
@{
}
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width"/>
    <title>Index</title>
</head>
<body>
    <!-- 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"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js" type="text/javascript"></script>
    <!-- Bootstrap DatePicker -->
 
    <form method="post">
        <input type="text" id="txtSelectedDate" name="SelectedDate" readonly="readonly"/>
        <input type="submit" value="Submit" asp-page-handler="Submit"/>
 
        <script type="text/javascript">
            $(function () {
                $('#txtSelectedDate').datepicker({
                    changeMonth: true,
                    changeYear: true,
                    format: "dd/mm/yyyy",
                    language: "tr"
                });
            });
        </script>
        @if (!string.IsNullOrEmpty(Model.Message))
        {
            <script type="text/javascript">
                $(function () {
                    alert("@Model.Message");
                });
            </script>
        }
    </form>
</body>
</html>
 
 
Screenshot
ASP.Net Core Razor Pages: Bootstrap DatePicker (Calendar) implementation
 
 
Browser Compatibility

The above code has been tested in the following browsers.

Internet Explorer  FireFox  Chrome  Safari  Opera 

* All browser logos displayed above are property of their respective owners.

 
 
Downloads
Download Code