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的日期選擇器

回答

相關問題