In this tutorial, I am going to explain you how to attach DatePicker or Calendar control in ASP.NET MVC using jQuery UI. I will be using Visual Studio 2013. Below is step by step tutorial.
Creating ASP.NET MVC Empty Application
Now the next step is to create ASP.NET MVC empty application as shown below.
Go to File → New → Project. A new window will be open as shown below.
Now go to Web and select .NET Framework 4.5 and give project name and click on OK .
Now new window will open as shown below.
Now Select Empty Template, check on MVC checkbox and click on OK.
Now, a new project will be created as shown below.
Installing jQuery UI using Nuget (Compulsory)
Next step is to install jQuery.UI. Right click on References and go to Manage NuGet Packages as shown below.
After that a new window will open as shown below. Search for jQuery.UI and install it.
After successful installation, you can see all css files related to datepicker are installed inside Content folder and and jquery-ui file is installed inside Scripts folder.
Installing Bootstrap and Unobtrusive jQuery (Optional)
If bootstrap js,css and Unobtrusive jQuery is not install in your application then you can install using nuget package manager.
Bootstrap: It is used for CSS and responsive design.
Unobtrusive jQuery: It is to make data annotation work at client machine.
Go to Models folder and add new class file Employee.cs. Now replace all code with below code.
Next step is to add controller to application. Go to controller folder and add new empty controller named as Home controller. Replace all code with below code.
Now, right click on home controller index action method, add new view and name Index. Select Empty template and uncheck Use layout page and click on Add as shown below.
Now go to Views / Home folder, open Index.cshtml file and replace all code with below code.
Here in script JS files, First is jQuery file and Second, Third is jquery-ui JS and CSS files which is compulsory. Make sure all files are loaded when application runs.
When application runs then view can be seen as below.
Now click on insert button, you can see calendar is attached to DOB textbox and required field data annotation is also worked.
You can also specify the animation, max date ,min date ,date range etc as shown below.
You can also overwrite the css of datepicker as shown below.CSS Code: