jQuery DateTime Picker Calendar in Asp.Net Core MVC

In today's article I will show a simple tutorial with an example how you can integrate a jQuery datetime picker calendar in asp.net core mvc and access the selected date at controller end using c#.net and VB.NET. So, for this article first we will create a new asp.net core mvc application. Here we are using .net core 10. Now add a model class file and add the below code.

public class UserModel
{
    public DateTime UserDOB { get; set; }
}

Now we will add controller class file and add a httpget and HttpPost action methods. Here Get method will act as a page load and Post method will trigger when click on submit button.

[HttpGet]
public IActionResult Index()
{
    UserModel userModel = new UserModel();
    return View(userModel);
}
[HttpPost]
public IActionResult Index(UserModel userModel)
{
    ViewBag.DateValue = userModel.UserDOB;
    return View(userModel);
}

In above code HttpGet method, I have passed the object of usermodel object to view. Now we will create a view and add the below code in it. Here in Post method, we have stored the value of model property in viewbag to display in view.

@model UserModel
@{
    ViewData["Title"] = "Index";
}
@section Scripts {
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.14.1/themes/base/jquery-ui.css" />
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script src="https://code.jquery.com/ui/1.14.1/jquery-ui.min.js"></script>

    <script>
        (function () {
            $(function () {
                $("#txtdatepicker").datepicker({
                    dateFormat: "yy-mm-dd",
                    yearRange: "1900:+0"
                });
            });
        })();
    </script>
}
<h2>jQuery Datepicker</h2>
@using (Html.BeginForm("Index", "User"))
{
    <p>
        @Html.TextBoxFor(m => m.UserDOB, new { @id = "txtdatepicker", @style = "width:300px;" })
        <br />
        Your selected date :@ViewBag.DateValue
        <br /><input type="submit" value="Submit" />
    </p>
}

Here in above code, I have added reference of jQuery library required for jQuery DateTime Picker calendar control. Here we are going to user TextBoxFor control for rendering the calendar control. In this datepicker() method is used for binding the control to textbox by passing the id of the textbox control. Now we have added input submit control to submit the form and get the selected date in controller.

In controller I have passed the model class name as a parameter to capture the user selected date in control. Now we have done, let run the code and check the output. Ones we select the date and click on submit the HttpPost method will execute and we will be able to get the selected date.