In this article I will explain with an example, how to implement
Bootstrap TimePicker in ASP.Net Core Razor Pages.
Download Bootstrap TimePicker Plugin
You will need to download the plugin files from the following location.
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 handles the POST call when the Submit Button is clicked and the Form is submitted.
Inside this Handler Method, the value of the selected Time is fetched and set into the public property Time.
public class IndexModel : PageModel
{
public string Time { get; set; }
public void OnGet()
{
}
public void OnPostSubmit(string selectedTime)
{
this.Time = "Selected Time: " + selectedTime;
}
}
Razor Page (HTML)
Inside the Razor Page, first the ASP.Net TagHelper is inherited.
The Razor Page consists of HTML Form consists of a 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 TimePicker Plugin implementation
Inside the Razor Page, the following
Bootstrap CSS files are inherited.
1. bootstrap.min.css
2. bootstrap-datetimepicker.min.css
And then, the following
jQuery,
Bootstrap DateTimePicker and locales JS files are inherited.
1. jquery.min.js
2. moment-with-locales.js
3. bootstrap.min.js
4. bootstrap-datetimepicker.min.js
Inside the
jQuery document ready event handler, the HTML TextBox has been applied with the
Bootstrap TimePicker plugin.
The format property of TimePicker plugin is set to LT.
Submitting the Form
When the Submit button is clicked, the Form is submitted and the public property Time object is checked for NULL and if it is not NULL then, the value of the public property Time object is displayed using JavaScript Alert Message Box.
@page
@addTagHelper*, Microsoft.AspNetCore.Mvc.TagHelpers
@model Bootstrap_TimePicker_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="form-group" style="margin: 30px">
<div class="input-group date" style="width: 200px">
<input type="text" name="selectedTime" id="txtTime" class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-time">
</span>
</span>
</div>
<br />
<input type="submit" value="Submit" class="btn btn-primary" asp-page-handler="Submit" />
</div>
</form>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript">
$(function () {
$('[id*=txtTime]').datetimepicker({
format: 'LT'
});
});
</script>
@if (Model.Time != null)
{
<script type="text/javascript">
$(function () {
alert("@Model.Time");
});
</script>
}
</body>
</html>
Screenshot
![ASP.Net Core Razor Pages: Implement Bootstrap TimePicker]()
Demo
Downloads
