Display multiple months in jQuery DatePicker in MVC3 Razor
- In this article we will see how to display multiple months in jQuery DatePicker.
- jQuery DatePicker in default behaviour shows dates for single month.
- We can make DatePicker to show dates for multiple months by setting numberOfMonths property.
- The property accepts integer value.
Following are the steps :
ViewModel :
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.ComponentModel.DataAnnotations;
namespace jQueryDatePicker.Models
{
public class Register
{
public DateTime DOB { get; set; }
}
}
We have created our ViewModel. We have a DOB property of type DateTime. The View will bind to this ViewModel and will generate control for this property which is our DatePicker.
View :
@model jQueryDatePicker.Models.Register
@{
Layout = "../Shared/_Layout.cshtml";
}
<!DOCTYPE html>
@Html.EditorFor(Model => Model.DOB)
<script type="text/javascript">
$(document).ready(function () {
$("#DOB").datepicker({
numberOfMonths: 3,
showButtonPanel: true
});
});
</script>
In the View the ViewModel is binded and the boolean property to show button panel is set to true.
Layout :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>@ViewBag.Title</title>
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.8.3.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.ui.datepicker.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.ui.widget.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.ui.core.min.js")" type="text/javascript"></script>
<link href="@Url.Content("~/Content/themes/base/jquery.ui.all.css")" rel="stylesheet" type="text/css" />
</head>
<body>
@RenderBody()
</body>
</html>
We need to include above jQuery script reference to make DatePicker work.
Demo :
Click inside textbox to open DatePicker.
Thus by setting the numberOfMonths property, we can display multiple months. We have supplied 3 to this property in the above example. On clicking the textbox we will see dates of 3 months.
