Easy Way To Use Datepicker In ASP.NET MVC

In this project we will learn how to add Datepicker in our ASP.net mvc project.We will use Jquery UI in this project.

Introduction

 

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.

 

Prerequisite

 

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.

 

Procedure

 

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.

 

 

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.

 

 

Now we have to add view so right click on index then add view. Set the parameters according to the picture below.

 

 

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.

 

 

Now you arrive at a view page and add the information  accordingly.

 

 

Jquery code

<script>
 $(document).ready(function () {
    $(".datepicker").datepicker({
       dateFormat: "dd-mm-yy",
       changemonth: true,
       changeyear: true
       });
    });
</script>

And we have to check that RenderSection is present and not in a layout file.

 

 

Now we are finished  with our project. Thanks for reading and happy learning.

 

Output