ASP.NET MVC 3 for beginners: add date input using jQueryUI and NuGet

In the course of teaching new technologies, newcomers often have typical problems that are not so easy to solve. A series of MVC3 articles for beginners will present solutions to such problems.

A frequent question that confronts web developers is adding a convenient date entry to a page using a drop-down element in the form of a calendar. This article provides a brief description of how to add such an element in MVC 3 in a few moments using the NuGet package manager and the jQuery UI library.

Below is the complete solution with source codes.
')

Installing components through Nuget

First of all, we need to add to the project a package with a jQuery UI DatePicker control, which allows you to organize on the web page a convenient input of the date in the input field.

Open the NuGet panel and enter the command:

install-package jQuery.UI.Widgets.Datepicker

After a few seconds, the package will be downloaded and installed along with all dependencies (Figure 1).


Fig.1. Running the NuGet command to add packages to a project

Markup

To demonstrate the operation of the control, we will create the following layout of the Index.cshtml Home controller page:

<p>  : @Html.TextBox("exampleDateTime") </p> <p>   : @Html.TextBox("exampleDateTime2", null, new { @class = "datePicker" })   : @Html.TextBox("exampleDateTime3", null, new { @class = "datePicker" }) </p> 

The markup contains a single field for entering dates and two fields for entering data that have the same CSS class.

Scripts and styles

In order for a component to work on a page, we need to include scripts responsible for its behavior and performance. In addition, we need at least the simplest design for the control.

To do this, add to the top of the page an indication of the need to connect script files and styles:

 <link href="@Url.Content("~/Content/themes/base/jquery.ui.core.css")" rel="stylesheet" type="text/css" /> <link href="@Url.Content("~/Content/themes/base/jquery.ui.datepicker.css")" rel="stylesheet" type="text/css" /> <link href="@Url.Content("~/Content/themes/base/jquery.ui.theme.css")" rel="stylesheet" type="text/css" /> <script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/jquery.ui.datepicker.min.js")" type="text/javascript"></script> 

Three CSS-style connects the design and processing of the control. If desired, they can be combined into one file.

The first script connects the jQuery UI library, and the second its Datepicker component.

Now everything is ready to enable the control on the page. Activate it and bind to the declared controls using the following JavaScript code, which must be placed at the end of the page:

 <script type="text/javascript"> $(document).ready(function () { $('#exampleDateTime').datepicker({ firstDay: 1, dateFormat: 'dd.mm.yy' }); $('.datePicker').datepicker({ firstDay: 1, dateFormat: 'dd.mm.yy' }); }); </script> 

Here is the initialization of a single element of the text input through the treatment by identifier. And, as an example, the initialization of several elements at once on a single class CSS.

The firstDay parameter sets the first day of the week (1 — Monday, 0 — Sunday, by default). To specify the date format, the dateFormat special parameter is used .

As a result, after starting the page, you will be able to enter data using the convenient control that offers the jQuery UI (Figure 2).


Fig. 2. Operation of the jQuery UI Control

Localization

First, you can use the standard jQuery UI Datepicker mechanism and set up localizations yourself:

$ .datepicker.setDefaults ({dayNamesMin: ['Sun', 'Mon', 'W', 'Wed', 'Thu', 'Fri', 'Sat']}));

Secondly, and this is the best way you can use a ready-made localization script from the developers, having received it at http://jqueryui.com/download . The package will include, among other things, the jquery.ui.datepicker-ru.js file. If you add it to the page, you will get a localized version of the control (Figure 3).


Fig. 3. Localization in action

Source codes

Project source code for Visual Studio 2010 can be downloaded from this link .