In this article I will explain with an example, how to implement
Bootstrap DateTimePicker in ASP.Net Core Razor Pages.
Download Bootstrap DateTimePicker Plugin
You will need to download the plugin files from the following location.
The complete documentation is available on the following page.
Razor PageModel (Code-Behind)
The PageModel consists of the following Handler methods.
Handler method for handling GET operation
This Handler method is left empty as it is not required.
Handler method for handling POST operation
This Handler method gets called when the Submit Button is clicked.
Inside this Handler Method, the value of the selected Date and Time is fetched and set into the public property DateTime.
public class IndexModel : PageModel
{
public string DateTime { get; set; }
public void OnGet()
{
}
public void OnPostSubmit(string selectedDateTime)
{
DateTime dt = Convert.ToDateTime(selectedDateTime);
this.DateTime = "Selected Date and Time: " + dt.ToString();
}
}
Razor Page (HTML)
HTML Markup
Inside the Razor Page, the ASP.Net TagHelper is inherited.
The HTML of Razor Page consists of an HTML Form consists of an HTML TextBox and a Submit Button.
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.
Bootstrap DateTimePicker Plugin implementation
Inside the Razor Page, the following CSS script files are inherited.
1. bootstrap.min.css
2. font-awesome.min.css
3. bootstrap-datetimepicker.css
And then, the following script files are inherited.
1. jquery.min.js
2. bootstrap.min.js
3. moment-with-locales.min.js
4. bootstrap-datetimepicker.min.js
Inside the
jQuery document ready event handler, the
TextBox has been applied with the
Bootstrap DateTimePicker plugin and also the HTML SPAN element with class
glyphicon-calendar has been assigned with
jQuery click event handler.
Submitting the Form
When the Date and Time is selected and the
Submit button is clicked, the Form is submitted and the public property
DateTime is checked for NULL and if it is not NULL then, the value of the public property
DateTime is displayed using
JavaScript Alert Message Box.
@page
@addTagHelper*, Microsoft.AspNetCore.Mvc.TagHelpers
@model Bootstrap_DateTimePicker_Core_Razor.Pages.IndexModel
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<form method="post">
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<div class="input-group date">
<input type="text" name="selectedDateTime" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar">
</span>
</span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<input type="submit" id="btnSubmit" value="Submit" asp-page-handler="Submit" />
</div>
</div>
</div>
</div>
</form>
<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.css"rel="stylesheet" />
<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://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment-with-locales.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript">
$(function () {
$("[id*=txtDateTime]").datetimepicker();
$('.glyphicon-calendar').click(function () {
$("[id*=txtDateTime]").focus();
});
});
</script>
@if (Model.DateTime != null)
{
<script type="text/javascript">
window.onload = function () {
alert('@Model.DateTime');
};
</script>
}
</body>
</html>
Screenshots
The Form
![ASP.Net Core Razor Pages: Implement Bootstrap DateTimePicker]()
DateTime object displaying the selected DateTime
![ASP.Net Core Razor Pages: Implement Bootstrap DateTimePicker]()
Demo
Downloads
