LOGIC Library

This site is the Logic involvement in sharing expertise and skills acquired in daily work. The goal is to create a solid knowledge base and share best practices in software development and systems management.

More info about us can be found on logicsistemi.it.

jQuery UI Datepicker calendar in ASP.NET MVC

jQuery UI Datepicker is a widget that allows you to select a date from a popup or inline calendar (as the official page says). In this article, we look at how to use it in an ASP.NET MVC page view, focusing to localization issues, too.

In a form, the jQuery UI Datepicker can appear as follow (the Datepicker is in Italian, because I consider localization, too. This is a plus, so, if you are not interested in localization, you can read the article anyway):

jQuery UI Datepicker calendar in ASP.NET MVC

A standard ASP.NET MVC project created by the wizard of Visual Studio should already have jQuery and jQuery UI files. If this not your case, please refer to the respective official web sites and follow the instructions for downloading and configuration.

The layout page

Before to see the source code of the view, we must give a look to the _Layout.cshtml file. You probably know that Layouts are, in Razor views, what Master pages were in previous versions of ASP.NET. Here's the code:

<html>
<head>
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
    @RenderSection("head_section", false)
</head>
<body>
    <div>
        <div id="header">
            &nbsp;
        </div>
        <div id="main">
            @RenderBody()
        </div>
        <div id="footer">
        </div>
    </div>
</body>
</html>

Other than inserting the obvious script tag to the jQuery source, we write the RenderSection instruction, in order to have in this position an HTML code block defined later in our view.

The view

The use of the Datepicker doesn't affect so much the code in the Razor view. Let's give a look:

...
...
@using (Html.BeginForm()) {
    @Html.ValidationSummary(true)
    <fieldset>
        <legend>News</legend>
        @Html.HiddenFor(model => model.NewsID)
        <div>
            @Html.LabelFor(model => model.NewsDate)
        </div>
        <div>
            @Html.EditorFor(model => model.NewsDate)
            @Html.ValidationMessageFor(model => model.NewsDate)
        </div>
        <div>
            @Html.LabelFor(model => model.Title)
        </div>
        <div>
            @Html.EditorFor(model => model.Title)
            @Html.ValidationMessageFor(model => model.Title)
        </div>
        <div>
            @Html.LabelFor(model => model.Body)
        </div>
        <div>
            @Html.EditorFor(model => model.Body)
            @Html.ValidationMessageFor(model => model.Body)
        </div>
        <p>
            <input type="submit" value="Save" />
        </p>
    </fieldset>
}
@section head_section{    
   <script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")" type="text/javascript"></script>
   <script src="@Url.Content("~/Scripts/jquery.ui.datepicker-it.js")" type="text/javascript"></script>   
   <script type="text/javascript">
        $(document).ready(function () {
             $("#NewsDate").datepicker();
             $.datepicker.setDefaults($.datepicker.regional["it"]);
        });       
   </script>
   <link rel="stylesheet" type="text/css" href="/Content/themes/base/jquery.ui.all.css" />
}

The first lines are written as usual, in order to manage the NewsDate input textBox.

Then we write the HTML code in the head_section we have just defined in the Layout page. Here are some details:

  • The tag script to the jQuery UI source.
  • The tag script to the jQuery UI Datepicker localization file. This file contains, essentially, the translations of the widget. Please, refer to the jQuery UI official site for more information.
  • $("#NewsDate").datepicker(); This instruction enables our textBox to work with the Datepicker.

Something more

If you write exactly the code above, you couldn't have the same result. In place of 03/05/2013 (The Italian way to write May 3, 2013), you could have something like 5/3/13 00.00.00. In order to obtain the same result, you must do the following:

  • Write the attribute [DataType(DataType.Date)] in the model definition, in order to display just the date (not the time):
    [MetadataType(typeof(NewsMetaData))]
    public partial class News
    {       
    }
    public class NewsMetaData
    {
        [Display(Name = "Date")]
        [DataType(DataType.Date)]
        public DateTime? NewsDate { get; set; }
    }
  • Write the usual localization definitions <globalization culture="it-IT" uiCulture="it-IT" /> in the Web.config file.

 

Add comment


Security code
Refresh