DateTimeInput and DateRange attribute
This control needs reference to both This control needs reference to both MVCControlToolkit.Controls-x.x.x.js (or MVCControlToolkit.Controls.Core-x.x.x.js+MVCControlToolkit.Controls.Datetime-x.x.x.js)
and jquery-1.4.2.js(or better). jquery-ui-1.8.6.min.js is needed, too, if one choose to show the date part of the DateTime with the jQuery DatePicker. It needs also MvcControlToolkit.Utils-x.x.x.min.js
The DateTimeInput control renders either a DateTime or a DateTime? property with separate DropDowns for Year, Month, Day, Hour, Minute, and Seconds. Year is rendered with a ComboBox only if the
control is able to compute a finite range for its possible values with the help of all DateRange attributes (described below) applied to the relative DateTime property. In any case one can force the use of a TextBox
by setting the useTextBoxForYear parameter to true.
One has also the option to show the Date part of the DateTime Using the jQuery UI DatePicker.
Date and Time can be rendered in separate places of the View and they are localized either according to a Culture furnished as input or according to the current UI culture. One can also choose to render just one of them.
However, if you render only the Time, please select the useDateHidden option. This way the original Date part of the DateTime will be recovered when the view is posted, otherwise the .Net default date
will be used (the Date part of default(DateTime)) that might be different from your default Date choice.
The DateTimeInput control limits the possible choices in the DropDowns only to the values compatible with the Range constraints applied to the relative DataTime property. Constraints are specified with the DateRange attribute
that allows also dynamic Minimum and dynamic Maximum be defined using other properties. Constraints are applied also on the client side, thus changes to one of a couple of related properties on the View will be immediately reflected on the other
property on the client side .
A description of the DateRange attribute is
here.
Below an example of use for the situation depicted in the list item 2
of the description of the DateRangeAttribute You can change it easily to experiment also the other situation.
Property declaration:
[DateRange(DynamicMaximum = "Stop", RangeAction = RangeAction.Verify,
DynamicMaximumDelay = "Delay", SMaximum = "2012-1-1", SMinimum = "2008-1-1")]
public DateTime Start {get;set;}
[MileStone]
public TimeSpan Delay{get;set;}
[DateRange(SMaximum = "2012-1-1", SMinimum = "2008-1-1")]
public DateTime Stop { get; set; }
Rendering of the Controls:
<div>
<%var DTS = Html.DateTimeFor(m => m.Start, DateTime.Now); %>
<%: DTS.Date() %> <%: DTS.Time() %>
</div>
<div><br /><br /></div>
<div>
<%var DT = Html.DateTimeFor(m => m.Stop, DateTime.Now); %>
<%: DT.Date() %> <%: DT.Time() %>
</div>
The second parameter of the DateTimeFor helper specifies the default date to display when the initial value of the property is null.
Other optional parameters allows also the specification of Html attributes and of a Culture to use for the date (otherwise the current UI culture is used).
Using the jQuery DatePicker.
In order to display the Date part of the DateTime into a jQuery DatePicker it is enough to set the dateInCalendar parameter of the
DateTimeFor Helper to true and calling the DateCalendar function in place of the
Date function. If the inLine parameter of the DateCalendar function is set to true (its default) the DatePicker is shown in-line otherwise the date is inserted in a textbox and the jQuery UI DatePicker appears as soon as this textbox takes focus.
In line DatePicker:
<div>
<%var DT = Html.DateTime("Stop", Model.Stop, dateInCalendar : true); %>
<table>
<tr>
<td>
<%: DT.DateCalendar(
calendarOptions: new CalendarOptions
{
ChangeYear=true,
ChangeMonth=true
})
%>
</td>
<td>
<%: DT.Time() %>
</td>
</tr>
</table>
</div>
Not in-line DatePicker:
<div>
<%var DT = Html.DateTime("Stop", Model.Stop, dateInCalendar : true); %>
<%: DT.DateCalendar(
inLine: false,
calendarOptions: new CalendarOptions
{
ChangeYear=true,
ChangeMonth=true
})
%> <%: DT.Time() %>
</div>
As you can see the DateCalendar function has an optional calendarOption parameter, to pass the jQuery UI options for the DatePicker. The avaliable options are:
public bool AutoSize { get; set; }
public string ButtonImage { get; set; }
public bool ButtonImageOnly { get; set; }
public string ButtonText { get; set; }
public bool ChangeMonth { get; set; }
public bool ChangeYear { get; set; }
public int Duration { get; set; }
public bool GoToCurrent { get; set; }
public bool HideIfNoPrevNext { get; set; }
public bool NavigationAsDateFormat { get; set; }
public int NumberOfMonths { get; set; }
public bool SelectOtherMonths { get; set; }
public string ShowAnim { get; set; }
public CalendarOptionsShowOn ShowOn { get; set; }
public bool ShowButtonPanel { get; set; }
public int ShowCurrentAtPos { get; set; }
public bool ShowOtherMonths { get; set; }
public bool ShowWeek { get; set; }
public string YearRange { get; set; }
public int StepMonths { get; set; }
public string DateFormat { get; set; }
For the documentation about these options, pls refer to the jQuery UI documentation here: http://jqueryui.com/demos/datepicker/. ATTENTION the DateFormat property uses the standards defined in the
client side globalization library plus the
"G" date format, instead of the format of the jQuery date picker. Both standard (such as "d" or "G") and custom (such as yyyy/MM/dd) formats are supported, but the chosen format
MUST contain both year, month and date. If DateFormat is null, the helper try to extract the format from the
FormatAttribute.
It is also possible to enable the jQuery support for the Gloavalization/Localization of the DatePicker by putting the following code after the jQueyUI script:
<%: Html.JQueryDatePickerGlobalizationScript() %>
The above code set the culture of the DatePicker to the CurrentCulture of the current Thread, and use the Globalization/Localization scripts in the CDN: http://jquery-ui.googlecode.com/svn/trunk/ui/i18n/
However, one has also the option to copy the Globalization/Localization scripts in your web site and to set manually the culture to be used in the format "en-US", or "en". The definition of the
JQueryDatePickerGlobalizationScript function is:
public static MvcHtmlString JQueryDatePickerGlobalizationScript(this HtmlHelper htmlHelper, string cultureName=null,
string globalizationFolder = "http://jquery-ui.googlecode.com/svn/trunk/ui/i18n/")