Question

Is this possible to have one DateTime property in model, but use it as two inputs on view/form? For example Date part will be using jqueryui datepicker, while Time part picker will be a masked input, or other nifty jquery plugin. From time to time i need to use two dropdows for time picking (hours and minutes).

My goal is to have one DateTime property in model (no partial strings for date and time). Is this possible? Using MVC4.

Answer 1

Here’s a technique i use to split a date into 3 fields, while only having 1 DateTime property on the ViewModel. While not exactly what you’re after, you should be able to use a similar method to achieve what you want.

Editor Template
/views/shares/editortempaltes/datetime.cshtml

@model Nullable<System.DateTime>         
@Html.TextBox("Day", Model.HasValue ? Model.Value.Day.ToString() : "", new { Type = "Number", @class="date-day" })
@Html.ValidationMessage("Day")
@Html.DropDownList("Month", months, new { @class="date-month" })
@Html.ValidationMessage("Month")
@Html.TextBox("Year", Model.HasValue ? Model.Value.Year.ToString() : "", new { Type = "Number", @class="date-year" })
@Html.ValidationMessage("Year")

Custom ModelBinder

public object GetValue(ControllerContext controllerContext, ModelBindingContext bindingContext, PropertyDescriptor propertyDescriptor)
{
    int day, month, year;

    if (TryGetValue(controllerContext, bindingContext, propertyDescriptor.Name + ".Day", out day) && TryGetValue(controllerContext, bindingContext, propertyDescriptor.Name + ".Month", out month) && TryGetValue(controllerContext, bindingContext, propertyDescriptor.Name + ".Year", out year))
    {
        try
        {
            return new DateTime(year, month, day);
        }
        catch (ArgumentOutOfRangeException)
        {
            var fullPropertyName = bindingContext.ModelName + "." + propertyDescriptor.Name;               
            bindingContext.ModelState[fullPropertyName] = new ModelState();                         
            bindingContext.ModelState[fullPropertyName].Errors.Add("Invalid date");
        }
    }
    return null;
}


private bool TryGetValue(ControllerContext controllerContext, ModelBindingContext bindingContext, string propertyName, out int value)
{
    var fullPropertyName = bindingContext.ModelName + "." + propertyName;
    string stringValue = controllerContext.HttpContext.Request[fullPropertyName];
bindingContext.ModelState.Add(fullPropertyName, new ModelState() { Value = new ValueProviderResult(stringValue, stringValue, null) });
    return int.TryParse(stringValue, out value);
}

Usage
Add a DateTime property to your ViewModel, then call

@Html.EditorFor(m => m.DateTimeProperty)