MVC3.0のdatetimepicker

Question

My Datetime Pickerは "Html.TextBoxFor"に対してうまくいきますが、 "Html.EditorFor"があるときはanydatepickerが表示されません。

次のように私はjQueryのを持っている：

$(document).ready(function() { 
       $('.dp').datepicker({ 
        changeMonth: true, 
        changeYear: true, 
        dateFormat: 'yy-mm-dd' 
       }); 
      }); 

私は私の.aspxページでこの機能を使用します。

<div class="float-left"> 
<%: Html.Label("BAASent Date") %> 
<br /> 
<%:Html.TextBoxFor(model => model.BAASentDate, new { @class = "dp" }) %> 
<%: Html.ValidationMessageFor(model => model.BAASentDate) %> 
</div> 

上記のコードはすべて正常に動作します。 しかし、 "Html.TextBoxFor"を "Html.EditorFor"に置き換えると、datetimeピッカーが表示されません。

ここで何が間違っていますか？

Answer 1

EditorForを使用すると、対応する入力フィールドにdpクラスが適用されない可能性があります。したがって、deatepickerに使用している$('.dp')セレクタは何も返しません。

$(document).ready(function() { 
    $('.dp :input').datepicker({ 
     changeMonth: true, 
     changeYear: true, 
     dateFormat: 'yy-mm-dd' 
    }); 
}); 

：あなたが指定したクラス名を持つdiv要素内の入力フィールドをフェッチするように、その後

<div class="float-left dp"> 
    <%= Html.Label("BAASent Date") %> 
    <br /> 
    <%= Html.EditorFor(model => model.BAASentDate) %> 
    <%= Html.ValidationMessageFor(model => model.BAASentDate) %> 
</div> 

とあなたのセレクタを調整します

一つの可能​​性は、親のdivにクラスを適用することです

もう1つの方法は、TextBoxにdpクラスを適用するDateTimeフィールド用のカスタムエディタテンプレートを作成することです。

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %> 
<%= Html.TextBox(
    "", 
    ViewData.TemplateInfo.FormattedModelValue, 
    new { @class = "text-box single-line dp" } 
) %> 

、その後：

<div class="float-left"> 
    <%= Html.Label("BAASent Date") %> 
    <br /> 
    <%= Html.EditorFor(model => model.BAASentDate) %> 
    <%= Html.ValidationMessageFor(model => model.BAASentDate) %> 
</div> 

、最終的には：（カスタムエディタのテンプレートを作成する）

$(document).ready(function() { 
    $('.dp').datepicker({ 
     changeMonth: true, 
     changeYear: true, 
     dateFormat: 'yy-mm-dd' 
    }); 
});