How to Use jQuery Calender In MVC3 | jQuery UI Datepicker Calender Control In Asp.Net Mvc Application

In this article I will show you how you can display jquery calendar control in your asp.net mvc application and retrieje the selected date at your controller .

Some of my previous article as follows: jQuery Validation for Terms and Conditions Checkbox in Asp.Net,  Code to Select All Checkbox in GridView in Asp.Net Using jQuery, Code to Detect Browser Close Using jQuery In Asp.Net, jQueryUI Tooltip Using jQuery on Textbox MouseOver in Asp.Net, Restrict Number of Characters to be Entered in the TextArea Using jQuery in Asp.Net MVC

So for this article first we will create a new mvcapplication and in this we will create model class file.

using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace DateTimePickerUsingJquery.Models {     public class DateModel     {         public string SelectedDate { get; set; }     } }

After creating model we will create controller and add the below code in our controller.

using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using DateTimePickerUsingJquery.Models; namespace DateTimePickerUsingJquery.Controllers {     public class HomeController : Controller     {         //         // GET: /Home/         public ActionResult Index()         {             DateModel objdatemodel = new DateModel();             objdatemodel.SelectedDate = "";             return View(objdatemodel);         }         [HttpPost]         public ActionResult Index(DateModel objdatemodel)         {             ViewBag.Date = objdatemodel.SelectedDate;             return View(objdatemodel);         }     } }

In this I have shown get and post both methods. Now we will create view for the controller action.

@model DateTimePickerUsingJquery.Models.DateModel @{     ViewBag.Title = "jQuery UI Datepicker Calender Control In Asp.Net Mvc Application"; } <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css"> <script src="http://code.jquery.com/jquery-1.10.2.js"></script> <script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script> <h2>     Datepicker Calender</h2> <script>     $(function () {         $("#txtdatepicker").datepicker();     }); </script> @using (Html.BeginForm("Index", "Home")) {     <p>         Date: @Html.TextBoxFor(m => m.SelectedDate, new { @id = "txtdatepicker", @style = "width:150px;" })</p>     <input type="submit" value="Submit" />     if (ViewBag.Date != null)     {     <p>         Your Selected Date :@ViewBag.Date</p>     } }

Below mention jQuery code used for displaying the jQuery calendar.

<script>     $(function () {         $("#txtdatepicker").datepicker();     }); </script>

Now we have done run the page to see the output.

DOWNLOAD