MVC直列jQuery的日期选择器

您好我有一个MVC创建：MVC直列jQuery的日期选择器

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

我迷上这件事是一个jQuery的日期选择器。

然后我决定我要的日期选择器是内联，如：

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

它说，要做到这一点，你需要调用.datepicker()在div，而不是输入。

好的，这很好，但我想这意味着我不能再使用@Html.EditorFor？

有人会知道如何实现这个MVC？

来源

2011-07-06 AnonyMouse

你可以使用一个隐藏的备用字段：

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

然后：

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

或保持@Html.EditorFor(x => x.Date)在您的视图和装饰您的视图模型属性与[HiddenInput]属性：

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

来源

2011-07-06 21:35:39

谢谢，这是一个非常酷的解决方案。尽管如此，我仍然希望输入文本框在那里。 – AnonyMouse

@AnonyMouse，酷，然后保持EditorFor而不是做一个隐藏的领域。 –

这似乎并不适用于MVC5和jquery-ui-1.8.23。仍然在寻找一种方法来做到这一点... – DaveN59

您可以在EditorTemplates folde中创建DateTime文件r并映射带有隐藏输入字段的容器div。你将不得不在编辑模板文件，像这样的DateTime类型：

@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>

然后你可以使用EditorFor语法像之前。有关编辑器模板的信息，请参阅http://blogs.msdn.com/b/nunos/archive/2010/02/08/quick-tips-about-asp-net-mvc-editor-templates.aspx。

来源

2011-07-06 21:42:37 longchiwen

MVC直列jQuery的日期选择器

回答

相关问题