Display multiple months in jQuery DatePicker in MVC3 Razor

Home » jQuery DatePicker » Display multiple months in jQuery DatePicker in MVC3 Razor

Display multiple months in jQuery DatePicker in MVC3 Razor

Posted by 20Fingers2Brains on Tags: jQuery DatePicker

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.