DateTimeInput and DateRange attribute 

This control needs reference to MVCControlToolkit.Controls.Core-x.x.x.js, and MVCControlToolkit.Controls.Datetime-x.x.x.js. Moreover,  if the date part of the DateTime must be shown with a Datepicker one of the following must be installed: jQuery Datepicker, Bootstrap Datepicker, or jQuery mobile Datebox. The control autodetects which Datepicker is installed and behaves accordingly.

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() &nbsp;&nbsp; @DTS.Time() 
                </div>
               </div>
               <div>
                @{var DT = Html.DateTimeFor(m => m.Stop, DateTime.Now);  }
                @DT.Date() &nbsp;&nbsp; @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).

The Date method has the following optional parameters:

  • useTextBoxForYear[=false]. When set to true a textbox is used instead of a select to insert the year part of the date.
  • htmlAttributesSelect[=null]. Either an anonymous object or a dictionary containing html attributes that are applied to all date select fields.
  • htmlAttributesText[=null]. Either an anonymous object or a dictionary containing html attributes that are applied to all date text fields(just the year may be shown in a text input).
  • culture[=null]. A Culture object containing a culture to be used instead of the current thread culture.

The Time method has the following optional parameters:

  • dateHidden[=false]. When set to true declares that the date part of the DateTime will not be rendered.
  • htmlAttributesSelect[=null]. Either an anonymous object or a dictionary containing html attributes that are applied to all date select fields. 
  • culture[=null]. A Culture object containing a culture to be used instead of the current thread culture.
  • timeDetail[=TimeDetail.Minutes]. An enumeration that specifies if the rendered time must include, seconds, minutes or just hours.
  • step[ = 1]. The step of the last time select. Thus, for instanc, if timeDetal=TimeDetail.Minutes and step=15, the user will be able to insert the time with a 15 minutes precision.

Using a DatePicker. 

In order to display the Date part of the DateTime into a DatePicker one of the following must be installed:  JQuery UI DatePicker, Bootstrap Datepicker, or jQuery mobile Datebox. Their scripts must be placed before MVCControlToolkit.Controls.Core-x.x.x.js since the autodetection of the installed Datepicker takes place there. After that it is enough to set the dateInCalendar parameter of the DateTimeFor Helper to true and to call the DateCalendar method instead of the Date method. 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>

in line DatePicker

 

Not in-line DatePicker:

 

                <div>
                @{ DT = Html.DateTime("Stop", Model.Stop, dateInCalendar : true);  }
                @DT.DateCalendar(
                    inLine: false,
                    calendarOptions: new CalendarOptions
                    {
                         ChangeYear=true,
                         ChangeMonth=true
                    })
                    &nbsp;&nbsp;@DT.Time()
                </div>

off line DatePicker

 

As you can see the DateCalendar function has an optional calendarOption parameter, to pass the jQuery UI options for the DatePicker.
Important: when using either Bootstrap or jQuery Mobile Datepicker the only option used is the Dateformat, all other options must be passed as Html 5 attributes as detailed in the Datepickers documentation. More specifically they must be passed in the htmlAttributes optional argument of the DateCalendar method (see below).

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. If DateFormat is null, the helper try to extract the format from the FormatAttribute, otherwise it defaults to the short date format of the current culture.

The DateCalendar method has the following optional arguments:

  • calendarOptions[=null]. Already discussed above
  • inLine[=true]. Already discussed above.
  • htmlAttributes[=null]. Either an anonymous object or a dictionary containing html attributes. This attributes are applied to the input field shown when inLine=false. Html5 attibutes containing Bootstrap or jQuery mobile Datebox options must be placed here, too.
 

Last edited Jun 22, 2014 at 10:55 AM by frankabbruzzese, version 28

Comments

frankabbruzzese Jan 13, 2012 at 1:31 PM 
DateTimeInput can be used with nullable DateTime. When the date is null it shows whatever date you pass in the Default Date parameter. This way a user will never see an actual empty date...if you would like to show to the user or you would like the user to be able to insert an empty date either use a TypedTextBox with the option to show a DatePicker, or detach the DateTimeInput from the dom to represent a null date with the help of a ViewOnOff control

sciamannikoo Oct 5, 2011 at 9:24 PM 
With ChangeYear = true, I get an empty year dropdown list.

sciamannikoo Oct 5, 2011 at 8:03 PM 
Apparently not...

Noyabronok Oct 4, 2011 at 5:59 PM 
Can this be used with a nullable datetime?