Display dates of other months in jQuery DatePicker in MVC3 Razor

Home » jQuery DatePicker » Display dates of other months in jQuery DatePicker in MVC3 Razor

Display dates of other months in jQuery DatePicker in MVC3 Razor

Posted by 20Fingers2Brains on Tags: jQuery DatePicker

In this article we will see how to show dates of other months in current month display.
In default display, jQuery DatePicker shows only dates of current month.
Not only you could see the dates of other month but also you can select the dates.
In order to show dates of other month, we need to set boolean property showOtherMonth to true.
We need to set boolean property selectOtherMonth to true to select other dates.

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({
            showOtherMonths: true,
            selectOtherMonths: 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>

Demo :

click inside textbox to open DatePicker.

Thus by this way we can show dates of other months and even can select them.