MVC inline jquery datepicker

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, t开发者_StackOverflowhat's fine but I guess that means I can't use @Html.EditorFor any more?

Would anyone know how to achieve this for MVC?

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; }

You can create DateTime file in EditorTemplates folder and map container div with hidden input field. You would have something like this in editor template file for DateTime type:

@model DateTime
@{
    var inputId = this.ViewData.ModelMetadata.PropertyName;
    var containerId = this.ViewData.ModelMetadata.PropertyName + "_container";
}

@Html.HiddenFor(x=>x)
<div id="@containerId"></div>
<script type="text/javascript">
    $("#@containerId").datepicker({
        onSelect: function (dateText, inst) {
            $("#@inputId").val(dateText);
        }
    });
</script>

Then you can use EditorFor syntax as you did before. See http://blogs.msdn.com/b/nunos/archive/2010/02/08/quick-tips-about-asp-net-mvc-editor-templates.aspx for info on editor templates.