ASP.Net MVC 4 jQuery Datepicker
In this tutorial, We will show you how to integrate jQuery Date Picker into MVC project
1. Microsoft VS 2012
In this tutorial we will copy code from jQuery website and paste into MVC project.
Step to integrate – ASP.Net MVC 4 jQuery datepicker
1. First of all, we assume you know how to create a new MVC project in MS 2012, in case you need guide, please refer to here.
3. Download jQuery-ui.css and save into content folder.
4. Create controller JqueryController.cs . (Right click on Controllers Folder > Add > Controller)
5. In the JqueryController.cs, add a view with name index. (Right click on ActionResult > Add View)
6. Go to App_start>BundleConfig.cs, and modify your code to include the downloaded jquery-ui.css like code below
7. In the Jquery > Index.chtml. Copy code from Jquery website and modify a little bit to make it look like MVC Code 🙂 .
$( "#datepicker" ).datepicker();
<h2>Date Time Picker</h2>
<p>Date: <input type="text" id="datepicker" /></p>
9. Run the application (Press F5). You will should see datepicker like below image.
This tutorial, we show you some basic steps you need to do in order to integrate jQuery datepicker into ASP .Net MVC environment. In next tutorial, we will show you how to perform date format validation and how to bind date from ViewModel into the view.