Display week of year in jQuery DatePicker in MVC3 Razor

Home » jQuery DatePicker » Display week of year in jQuery DatePicker in MVC3 Razor

Display week of year in jQuery DatePicker in MVC3 Razor

Posted by 20Fingers2Brains on Tags: jQuery DatePicker

In this article we will see how to display week of year in jQuery DatePicker.
In order to achieve this we need to set boolean property showWeek to true.
We can also set the day of week to display the 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({
            showWeek: true,
            firstDay: 1
        });
    });
</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 :

Thus by setting the boolean property showWeek to true, we can also display the week number.