Display button bar in jQuery DatePicker in MVC3 Razor

Home » jQuery DatePicker » Display button bar in jQuery DatePicker in MVC3 Razor

Display button bar in jQuery DatePicker in MVC3 Razor

Posted by 20Fingers2Brains on Tags: jQuery DatePicker

In this article we will see how to display button display bar in jQuery DatePicker.
We need to set one boolean property showButtonPanel to true.
The button panel has two buttons by default.
One is Today button to select today's date in the calendar and other is Done button to close the DatePicker.
Button are enabled by default when the bar is displayed, but can be turned off with additional options.
Button text is customizable.

Following are the steps :

We will create our ViewModel first.

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({
            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 reference of above script files to make DatePicker work.

Demo :

Click inside textbox to display DatePicker.

Thus setting the boolean property to true i.e. showButtonPanel displays the button panel bar. The buttons are enable by default. We can customize the button text and can include more buttons.