Index

--- title: "Calendar in MVC" description: "In this article I will explain you, how to use jquery calendar control in ASP.NET MVC. Here I will also describe that how to pass selected date of cal" author: "Chris Anderson" published: 2011-10-05 updated: 2020-01-06 canonical: https://www.mindstick.com/articles/762/calendar-in-mvc category: "asp.net mvc" tags: ["asp.net mvc"] reading_time: 3 minutes --- # Calendar in MVC In this article I will explain you, how to use jquery calendar [control in ASP.NET](https://www.mindstick.com/forum/297/user-control-in-asp-dot-net-mvc) MVC. Here I will also describe that how to pass selected date of calendar to [controller](https://www.mindstick.com/blog/273/passing-values-from-controller-to-view-in-asp-dot-net-mvc). Create a property in a [model class](https://www.mindstick.com/forum/2281/filter-objects-inside-model-class-by-date) that returns a date to a caller. In the below class I had created a property named Date in which we can set Date value or we can get Date from that property. ``` using System.ComponentModel.DataAnnotations; using System.ComponentModel; namespace MVCCalendar.Models{ public class ModelClass { [Required(ErrorMessage = "Date Required")] public string Date { get; set; } } } ``` \ We have to add following jquery file (jquery-1.6.2.min.js, jquery-ui-1.8.16.custom.min.js) to use the [calendar control](https://www.mindstick.com/articles/308/monthcalendar-control-in-vb-dot-net) in View. I have also created a [javascript function](https://www.mindstick.com/forum/156513/asynchronous-javascript-function) in script tag that call’s the datepicker function.\ When you click on [submit button](https://www.mindstick.com/forum/130/its-possible-without-submit-button) it will call another view (SubmitDate) that return a selected date. ``` <%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %> Index <% using (Html.BeginForm("SubmitDate", "Home", FormMethod.Post)) {%>

Date: <%: Html.TextBoxFor(x => x.Date, new { id = "datepicker" })%>

<%} %>

``` \ In a Controller class, Index action returns a view and SubmitDate action returns a date if you selected, else it will give a message "You have not selected any date". ``` using System.Web.Mvc; using MVCCalendar.Models; namespace MVCCalendar.Controllers{ public class HomeController : Controller { public ActionResult Index() { return View(); } [HttpPost] public string SubmitDate(ModelClass model) { if (ModelState.IsValid) { return "You have selected a date : " + model.Date.ToString() + ""; } return "You have not selected any date"; } } } ``` After completing the above process you can see an output of [your project](https://www.mindstick.com/forum/156583/best-way-to-link-bootstrap-file-in-your-project) by pressing F5. In the browser it will show you a textbox and when you set a focus on textbox it will show you a calendar. You can select a date from calendar. ![Calendar in MVC](https://www.mindstick.com/mindstickarticle/27f15546-f7a7-46d7-b03d-ec58296b20f2/images/116f77ad-a6b2-46e3-98e7-ee04d8691234.png) When you select a country and click on submit button, it will call Submit action from the Controller and show you a selected date. ![Calendar in MVC](https://www.mindstick.com/mindstickarticle/27f15546-f7a7-46d7-b03d-ec58296b20f2/images/33082a10-28c0-4d60-8aef-bee72c6bfd05.png) By using above process you can simply learn that how to use calendar and get a [selected value](https://www.mindstick.com/forum/525/get-selected-value-of-datagridviewcomboboxcolumn) from the calendar in MVC. \ --- Original Source: https://www.mindstick.com/articles/762/calendar-in-mvc Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.