Introduction
The datepicker is one of the simplest but most customizable (see the Fluent Configuration API section below) widgets. Here is an example both for the Datepicker
and DatepickerFor methods.
@model DatepickerModel
<div class="editor-field">
<label for="date1">Date 1 </label>
@Html.JQueryUI().Datepicker("date1")
</div>
<div class="editor-field">
<label for="StartDate">Start Date </label>
@Html.JQueryUI().DatepickerFor(m => m.StartDate)
</div>
The result is this.
The next example demonstrates the fluent configuration API.
<div>
<label for="Date2">Date 2</label>
@(Html.JQueryUI().Datepicker("Date2").MinDate(DateTime.Today).ShowButtonPanel(true)
.ChangeYear(true).ChangeMonth(true).NumberOfMonths(2))
</div>
This creates the following datepicker.
Inline Datepicker
A datepicker can be embedded in a page by calling the Inline method with true parameter. In this case the detepicker also creates a hidden input element
and puts its value into it, so it can easily be submitted just by placing the datepicker inside a form.
<div class="editor-field">
<label for="date3">Date 3 </label>
@Html.JQueryUI().Datepicker("date3", DateTime.Today.AddDays(7)).Inline(true)
</div>
The result is this.
Client Side Format Validation
When client side validation is enabled, MVC4 validates the date format using the default jQuery date validator (triggered by the presence of the data-val-date attribute).
Starting form version 0.5.4 jQuery UI Helpers replaces the default date validator with its own validator that validates the date using the date format set for the datepicker.
This is needed to ensure that values entered using the datepicker will pass the validation.
This works only if you include the validation scripts before the jQuery UI Helpers script.
Culture Settings
jQuery UI Helpers now supports configuring the datepicker culture with jQuery UI i18n. To use this feature add jQuery UI i18n to your
project, add a script reference to its JavaScript file and call @Html.JQueryUI().InitializeDatepickerCulture() in your view. This will set the datepicker culture based on the
server thread's CurrentUICulture. If you want to use a different setting call the overload of InitializeDatepickerCulture which takes a CultureInfo object
as its parameter.