In this article I will explain with an example, how to implement
jQuery DatePicker in ASP.Net Core Razor Pages.
Image File Location
The Calendar image file is present inside the Images Folder (Directory) of wwwroot Folder (Directory).
![ASP.Net Core Razor Pages: jQuery DatePicker]()
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 Submit Button is clicked.
Inside this Handler method, the value of the selected date is fetched and converted to DateTime object using ToDateTime method of Convert class and set into the public property i.e. Date.
public class IndexModel : PageModel
{
public string Date { get; set; }
public void OnGet()
{
}
public void OnPostSubmit(string selectedDate)
{
if (!string.IsNullOrEmpty(selectedDate))
{
DateTime dt = Convert.ToDateTime(selectedDate);
this.Date = "Selected Date: " + dt.ToShortDateString();
}
}
}
Razor Page (HTML)
Inside the Razor Page, first the ASP.Net TagHelper is inherited.
The Razor Page consists of an HTML Form.
The HTML Form consists of an HTML INPUT 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 DatePicker Plugin implementation
Inside the HTML of Razor Page, the following
jQuery UI CSS script file is inherited.
1. jquery-ui.css
And then, the following
jQuery and
jQuery UI script files are inherited.
1. jquery.min.js
2. jquery-ui.min.js
Inside the
jQuery document ready event handler, the TextBox has been applied with the
jQuery DatePicker plugin.
The jQuery DatePicker plugin has been assigned following properties:
showOn – button
For showing jQuery DatePicker only when the Button next to the TextBox is clicked.
buttonImageOnly – true
This indicates that the Image will be a Button.
buttonImage – URL
The path of the Image file to be displayed as Button.
dateFormat – mm/dd/yy
The jQuery DatePicker will set the selected date in MM/dd/yyyy date format in TextBox.
Submitting the Form
When the date is selected and the Submit button is clicked, the Form is submitted and the public property Date object is checked for NULL and if it is not NULL then, the value of the public property Date object is displayed using JavaScript Alert Message Box.
@page
@model jQuery_DatePicker_Core_Razor.Pages.IndexModel
@addTagHelper*, Microsoft.AspNetCore.Mvc.TagHelpers
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<form method="post">
<input type="text" id="txtDate" name="selectedDate" />
<hr />
<input type="submit" value="Submit" asp-page-handler="Submit" />
</form>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css" />
<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://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<script type="text/javascript">
$(function () {
$("#txtDate").datepicker({
showOn: 'button',
buttonImageOnly: true,
buttonImage: 'Images/calendar.gif',
dateFormat: 'mm/dd/yy'
});
});
</script>
@if (Model.Date != null)
{
<script type="text/javascript">
window.onload = function () {
alert("@Model.Date");
};
</script>
}
</body>
</html>
Screenshots
The Form
![ASP.Net Core Razor Pages: jQuery DatePicker]()
DateTime object displaying the selected DateTime
![ASP.Net Core Razor Pages: jQuery DatePicker]()
Browser Compatibility
* All browser logos displayed above are property of their respective owners.
Demo
Downloads
