Question

Hi I have a MVC create with:

<div class="editor-label">
            @Html.LabelFor(model => model.Date)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Date)
            @Html.ValidationMessageFor(model => model.Date)
        </div>

I hooked this up to be a jquery datepicker.

I then decided I wanted the datepicker to be inline like:

http://jqueryui.com/demos/datepicker/#inline

It says to do this you need to call .datepicker() on a div instead of an input.

Ok, that’s fine but I guess that means I can’t use @Html.EditorFor any more?

Would anyone know how to achieve this for MVC?

Answer 1

You could use a hidden alternate field:

<div class="editor-label">
    @Html.LabelFor(model => model.Date)
</div>
<div class="editor-field" id="datepicker">
    @Html.HiddenFor(model => model.Date)
    @Html.ValidationMessageFor(model => model.Date)
</div>

and then:

$('#datepicker').datepicker({
    altField: "#Date",    
});

or keep the @Html.EditorFor(x => x.Date) in your view and decorate your view model property with the [HiddenInput] attribute:

[HiddenInput]
public DateTime? Date { get; set; }