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

Hi friends,in this article I will explain about How to use Datepicker Calender Control In Asp.Net Mvc Application || How to Use jQuery Calender In MVC3.
Datepicker is a nice and cool plugin for displaying the calendar with ease. It is very easy to use JQuery plugin, it comes as part of JQueryUI library, so if you want to use this – first download JQueryUI from http://jqueryui.com/download and also download JQuery(http://docs.jquery.com/Downloading_jQuery) if you haven’t done so yet.

Model(JQueryUIDatePicker.cs)

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

Controller(JQueryUIDatePickerController.cs)

using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using JQueryUIDatePicker.Models; namespace JQueryUIDatePicker.Controllers {     public class JQueryUIDatePickerController : Controller     {               public ActionResult Index()         {             JQueryUIDatePickerModel obj = new JQueryUIDatePickerModel();             obj.SelectedDate = "";             return View(obj);         }         [HttpPost]         public ActionResult Index(JQueryUIDatePickerModel obj)         {             ViewBag.Date = obj.SelectedDate;             return View(obj);         }     } }

View(Index.cshtml)

@model JQueryUIDatePicker.Models.JQueryUIDatePickerModel @{     ViewBag.Title = "MVC: JQuery UI DatePicker (Calendar) Example"; } <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" type="text/javascript"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"     type="text/javascript"></script> <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css"     rel="Stylesheet" type="text/css" /> <h2>     Datepicker Calender</h2> <script type="text/javascript" language="javascript">     $(function () {         $("#txtdatepicker").datepicker();     }); </script>   <style type="text/css">         .ui-datepicker         {             font-size: 8.5pt !important;             color: Red;         }     </style> @using (Html.BeginForm()) {     <p>          Date: @Html.TextBoxFor(m => m.SelectedDate, new { @id = "txtdatepicker", @style = "width:200px;" })</p>     <input type="submit" value="Submit" />     if (ViewBag.Date != null)     {     <h4>         Your Selected Date :@ViewBag.Date</h4>     } }

Routing(Global.asax)

using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using System.Web.Routing; namespace JQueryUIDatePicker {     // Note: For instructions on enabling IIS6 or IIS7 classic mode,     // visit http://go.microsoft.com/?LinkId=9394801     public class MvcApplication : System.Web.HttpApplication     {         public static void RegisterGlobalFilters(GlobalFilterCollection filters)         {             filters.Add(new HandleErrorAttribute());         }         public static void RegisterRoutes(RouteCollection routes)         {             routes.IgnoreRoute("{resource}.axd/{*pathInfo}");             routes.MapRoute(                 "Default", // Route name                 "{controller}/{action}/{id}", // URL with parameters                 new { controller = "JQueryUIDatePicker", action = "Index", id = UrlParameter.Optional } // Parameter defaults             );         }         protected void Application_Start()         {             AreaRegistration.RegisterAllAreas();             RegisterGlobalFilters(GlobalFilters.Filters);             RegisterRoutes(RouteTable.Routes);         }     } }

The output of the above code as shown in the below figure

You can download the code by clicking on the below Download image.