jQuery DatePicker inline mode in MVC3 Razor

Home » jQuery DatePicker » jQuery DatePicker inline mode in MVC3 Razor

jQuery DatePicker inline mode in MVC3 Razor

Posted by 20Fingers2Brains on Tags: jQuery DatePicker

In this article we will see how to render jQuery DatePicker in inline mode.
Generally datepicker opens up on click of button or on clicking inside textbox.
The inline display the datepicker embedded in the page instead of in an overlay.
We need to call .datepicker() on a div instead of an input to achieve inline datepicker.
We will see how we can render Inline DatePicker in MVC3 Razor application.

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
    {
        [UIHint("DOB")]
        public DateTime DOB { get; set; }
    }
}

The above is our ViewModel. The ViewModel contains a property which is of type DateTime. As you can see we have define DataAnnotation property UIHint which indicates to call EditorTemplate with name DOB to render control for this property. In EditorTemplate we are rendering a div element.

View :

@model jQueryDatePicker.Models.Register
@{
    Layout = "../Shared/_Layout.cshtml";
}

<!DOCTYPE html>

@using (Html.BeginForm("DatePicker", "DatePicker"))
{
@Html.EditorFor(Model => Model.DOB)
<input type="submit" value="Submit" />
}

<script type="text/javascript">

    $(document).ready(function () {

        $('#DOB').datepicker();
    });
</script>

EditorTemplate :

<div id="DOB"></div>

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>

Include the above jquery files in your layout referred by View.

Demo :

Using the Div instead of textbox, we could render datepicker in inline mode i.e. embedded on page.