jquery DatePicker on button Click in MVC3 Razor

Home » jQuery DatePicker » jquery DatePicker on button Click in MVC3 Razor

jquery DatePicker on button Click in MVC3 Razor

Posted by 20Fingers2Brains on Tags: jQuery DatePicker

In this article we will see how to open datepicker on button or image click.
In the other article we saw how to open datepicker on clicking inside textbox.
The default behavior of jQuery UI Datepicker control is to show Datepicker on click to the element to which it is bind. But sometimes it is required to open the datepicker control on click of button.

We need to set following properties :

showOn: This is compulsory.
buttonText: This is optional. If set then text is displayed on the button on mouseover.
buttonImageOnly: This is optional but set to true to place an image after the field to use as the image without it appearing on a button.
buttonImage: This is also compulsory. The URL for the popup button image.

ViewModel :

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace jQueryDatePicker.Models
{
    public class Register
    {
        public DateTime DOB { get; set; }
    }
}

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({
            showOn: "button",
            buttonText: "DatePicker",
            buttonImage: "../../Content/themes/base/images/calendar.gif",
            buttonImageOnly: true
        });
    });
</script>

In the view under script section, we have set the above properties, which renders a image next to textbox and on click of which datepicker opens.

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 :

The showOn : "button" renders a image next to the textbox. On click of this image, datepicker opens. The buttonImage property accepts a image url which is shown as icon.

By following steps we can open DatePicker on click of image or button instead of textbox.