MVCインラインjqueryの日付ピッカー

Question

こんにちは私はMVCを作成しています

<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の日付ピッカーになるこのフックアップ。

私はその後、私は次のように日付ピッカーがインラインになりたかったことを決めた：それはあなたが入力の代わりにdivに.datepicker()を呼び出す必要があり、これを行うために言う

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

。

これは問題ありませんが、私はそれ以上@Html.EditorForを使用できないと思いますか？

誰でもMVCのためにこれを達成する方法を知っていますか？

Answer 1

あなたは隠された別のフィールドを使用できます。

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

またはあなたのビューで@Html.EditorFor(x => x.Date)を維持し、[HiddenInput]属性を使用してビューモデルプロパティを飾る：

を

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

をして、

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

Answer 2

EditorTemplatesフォルダーにDateTimeファイルを作成することができますrとマップコンテナdivと非表示の入力フィールドがあります。

@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を参照してください。