Question

I’m writing an editor template for entering a date and time which is made up of three fields.

• A textbox with a jQuery UI datepicker.
• A textbox for entering the time.
• A hidden input that is updated with the complete date and time string through javascript.

The idea is to have separate fields for date and time displayed to the user, while there is only one field that is bound to the model. Whenever the displayed fields are changed, the hidden field is updated through JavaScript.

@model System.DateTime?
<span class="datetime-editor">
<input class="datepicker" value="@(Model.HasValue ? 
  Model.Value.Date.ToString() : string.Empty)" readonly="readonly"/>
<input class="time" value="@(Model.HasValue ? 
  Model.Value.TimeOfDay.ToString() : string.Empty)"/>
@Html.HiddenFor(d => d)</span>

The JavaScript to set up the datepicker and copy the values to the hidden field.

$(".datepicker").datepicker();
$(".datetime-editor").find("input").change(function () {
    var date = $(this).parent().find(".datepicker").val();
    var time = parseTime($(this).parent().find(".time").val());
    if (date != "" && time != null) {
        $(this).siblings(".datetime-result").val(date + " " + time);
    }
    else {
        $(this).siblings(".datetime-result").val("");
    }
});

My problem is the validation attributes. They are all present in the hidden input tag:

<input name="StartDateTime" id="StartDateTime" type="hidden" 
  data-val-required="Start date and time are required" data-val="true" value=""/>

I would like to somehow grab the generated data-val* attributes and add them to the visible inputs instead. Through ViewData.ModelMetaData I can find out if the field is required or not, but then I would have to reinvent the logic to create the data-val-required attribute. I would like to get the generated attributes instead.

Answer 1

You could use an HTML helper to generate those inputs if you want HTML5 data-* validation attributes on them:

@{
    var validationAttributes = Html.GetUnobtrusiveValidationAttributes("");
}
@Html.TextBox(
    "", 
    Model.HasValue ? Model.Value.Date.ToString() : string.Empty, 
    new RouteValueDictionary(validationAttributes) 
    { 
        { "class", "datepicker" }, 
        { "readonly", "readonly" } 
    }
)

@Html.TextBox(
    "", 
    Model.HasValue ? Model.Value.TimeOfDay.ToString() : string.Empty, 
    new RouteValueDictionary(validationAttributes) 
    { 
        { "class", "time" } 
    }
)