Easy Way To Use Datepicker In ASP.NET MVC


In this article we will learn about how to add Datepicker in our ASP.Net MVC project. We will use Jquery UI to add Datepicker in our project. In this project I  am binding Datepicker with my model class property. You can even bind it with your Database model class property.
If you don't know about the basics of an ASP.Net MVC  project then please check my previous article; it will help you a lot.


Let's start our project in ASP.Net MVC.
  1. Create a new project in ASP.Net web Application.
  2. Select MVC as a template.
  3. Add new controller into a controller folder and name it as peryour  requirement (my controller name : DatepickerController).
Now we can see the window looks something like this.
Datepicker In ASP.NET MVC
Next we have to add one class inside a model folder. If you want to get and set data of datepicker from your Database table class then you don't need to add a new model class.
After adding model class you have to add property into it.
Datepicker In ASP.NET MVC
Now we have to add view so right click on index then add view. Set the parameters according to the picture below.
Datepicker In ASP.NET MVC
Next we download JquerUI (Combined library) from nuget package.
So follow the steps:
Tools -> NuGet Package Manager -> Manage NuGet Package Solution -> Search "Jquery UI" Download it.
Datepicker In ASP.NET MVC
Now you arrive at a view page and add the information  accordingly.
Datepicker In ASP.NET MVC
Jquery code
  1. <script>
  2. $(document).ready(function () {
  3.    $(".datepicker").datepicker({
  4.       dateFormat: "dd-mm-yy",
  5.       changemonth: true,
  6.       changeyear: true
  7.       });
  8.    });
  9. </script>
And we have to check that RenderSection is present and not in a layout file.
Datepicker In ASP.NET MVC
Now we are finished  with our project. Thanks for reading and happy learning.
Datepicker In ASP.NET MVC