In this article I will explain with an example, how to implement jQuery DateTimePicker in ASP.Net Core Razor Pages.
Note: For beginners in ASP.Net Core 7 Razor Pages, please refer ASP.Net Core 7 Razor Pages: Hello World Tutorial with Sample Program example.
 
 
Download jQuery DateTimePicker Plugin
You will need to download the plugin files from the following location.
jQuery DateTimePicker
The complete documentation is available on the following page.
https://xdsoft.net/jqplugins/datetimepicker/
 
 
Plugin files Location
The Plugin files are stored inside the plugin Folder (Directory) of wwwroot Folder (Directory).
ASP.Net Core Razor Pages: Implement jQuery DateTimePicker
 
 
Allowing access to Static Files in ASP.Net Core
Inside the Program.cs class, you will need to allow Static files by calling the function UseStaticFiles. Unless this function is called, the Static files will not be accessible.
Note: For more details on how to use Static Files, please refer my article Static Files (Images, CSS and JS files) in ASP.Net Core.
 
 
Razor Page (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 Submit Button is clicked.
Inside this Handler method, the selected Date and Time is fetched from the TextBox 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)
Inside the Razor Page, the ASP.Net TagHelpers is inherited.
The HTML of Razor Page consists of an HTML Form consisting 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.
 
jQuery DateTimePicker Plugin implementation
Inside the View, the following jQuery DateTimePicker CSS file is inherited.
1. jquery.datetimepicker.css
 
And then, the following jQuery and jQuery DateTimePicker JS scripts files are inherited.
1. jquery.min.js
2. jquery.datetimepicker.full.js
Inside the jQuery document ready event handler, the HTML TextBox has been applied with the jQuery DateTimePicker plugin.
 
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 object is displayed using JavaScript Alert Message Box.
Note: For more details in Form Submission in ASP.Net Core Razor Pages, please refer ASP.Net Core Razor Pages: Form Submit (Post) Example.
 
@page
@addTagHelper*, Microsoft.AspNetCore.Mvc.TagHelpers
@model jQuery_DateTimePicker_Core_Razor.Pages.IndexModel
@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link href="/plugin/jquery.datetimepicker.css" rel="stylesheet" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script src="/plugin/jquery.datetimepicker.full.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#dateTime").datetimepicker();
        });
    </script>
</head>
<body>
    <form method="post">
        <input type="text" id="dateTime" name="selectedDateTime" />
        <input type="submit" id="btnSubmit" value="Submit" asp-page-handler="Submit" />
    </form>
    @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 jQuery DateTimePicker
 
DateTime object displaying the selected DateTime
ASP.Net Core Razor Pages: Implement jQuery DateTimePicker
 
 
Demo
View Demo
 
 
Downloads
Download Code